Верстка \ Препроцессоры css

Применение Sass директив @error, @warn и @debug

От автора: методы обратной связи очень важны в любом языке программирования. В JavaScript’е вы, возможно, используете console.log() или alert(). В PHP это var_dump() или print_r(). В Ruby вы можете воспользоваться debug или inspect. С помощью этих функций вы можете отлаживать любое значение в коде и узнать, что делает ваш код на любой стадии в заложенной вами логике.

В Sass для этого существует три директивы. Это @error, @warn и @debug. В этой статье мы рассмотрим, как их использовать, в каких случаях удобнее всего ими пользоваться и что они возвращают.

Продолжить чтение

Верстка \ Препроцессоры css

Центрирование с помощью Sass

От автора: всем известно, что центрирование в CSS достаточно утомительный процесс. На эту тему уже сложено масса шуток, например, «нам удалось запустить человека на луну, но мы не умеем делать вертикальное выравнивание в CSS».

Продолжить чтение

Верстка \ Препроцессоры css

Структурирование селекторов классов CSS с помощью Sass

От автора: существует масса способов именования CSS. Вы, скорее всего, слышали про BEM и SMACSS (последний больше чем просто способ). Также есть OOCSS, больше похожий на целую методику. Все они в значительной степени зависят от селекторов классов CSS из-за их большой универсальности.

Продолжить чтение

Верстка \ Препроцессоры css

Знакомство с LESS

От автора: Возможно, вы уже сталкивались с понятием «CSS препроцессор», но не стали его изучать, потому что это показалось вам сложным или вы подумали, что придется изучить тонны нового синтаксиса. И хотя это и может оказаться правдой, вы все равно способны настроиться на нужный лад и очень легко начать пользоваться несколькими базовыми преимуществами чего-нибудь наподобие LESS.

Продолжить чтение

Верстка \ Препроцессоры css

Начинаем работать с препроцессором Sass

От автора: Препроцессоры – популярный способ упрощения и написания более управляемого CSS, а также применения фреймворков для написания лучшего CSS. Давайте рассмотрим основные принципы и узнаем, как создать полностью насыщенную CSS3 кнопку с градиентами, тенями и переходами, предоставив при этом препроцессору Sass и фреймворку Compass возможность проделать за нас всю сложную работу.

Продолжить чтение