Блог
Статьи, которые я написал
Преимущества вёрстки с использованием SASS
21 декабря 2017

При написании стилей я обычно использовал простой CSS и в принципе не чувствовал ни каких проблем с этим, и, как слелствие, не планировал тратить время на изучение препроцессоров. Но прогресс не стоит на месте, и вскоре я начал замечать, что всё больше разработчиков стали писать стили исключительно с использованием какого-либо помощника. Это заставило меня задуматься и подробнее изучить вопрос.

Существует несколько популярных CSS препроцессоров, но мой выбор пал на SASS. Основным приемуществом для себя я увидел то, что в синтаксисе SCSS практически нет отличий привычного CSS, но при этом есть все приемущества препроцессора. Какие же приемущества даёт использование препроцессора?

Самым первым, к чему привыкаешь, а потом просто не понимаешь как обходился без этого является использование переменных. Теперь, если нужно изменить один цвет на другой, а этот цвет используется в различных элементах и блоках проекта, достаточно просто в начале разработки создать переменную, в которой будет содержаться этот цвет и затем вместо его значения в стилях использовать имя этой переменной. Затем при изменении цвета, достаточно просто поменять значение переменной и цвет поменяется везде, где вы её использовали.

Это очень удобно, но SASS идёт ещё дальше и предоставляет возможность удобного переиспользования целых блоков свойств. Достаточно в начале проекта определить mixin и затем использовать его где вам нужно, просто прописывая @include mixin_name.

Это только вершина айсберга под названием SASS. В следующих статьях мы продолжим изучение преимуществ этого препроцессора.

Вложенность в SASS
28 декабря 2017

Продолжаем рассматривать преимущества, которые предоставляет нам использование препроцессора SASS. Сегодня мы познакомимся с возможностью написания вложенных стилей. Представим обычный HTML код. Обычно один тэг вложен в другой, в него вложен третий и так далее. В CSS стилях такого нет, мы сперва стилизуем родителя, потом стилизуем потомка. Между их стилями могут быть ещё какие-то стили, что делает код неудобным для чтения и правок.

SASS даёт нам возможность вкладывать одни стили в другие. Тоесть в стиле родителя мы можем обратиться к селектору потомки и стилизовать его. Такой подход делает код максимально понятным и удобным. Ещё более удобной является возможность использования медиазапросов внутри стилизуемого элемента. Благодаря этому, глядя его свойства, мы можем увидеть их изменение при различных разрешения и быстро изменить их в случае необходимости. Да и само написание медиазапросов становится максимально удобным. В прошлой статье мы рассмотрели возможность написания примесей и приминения их. Медиа запросы можно оформить как примесь и при помощи @include просто добавить их.

В следующих статьях мы продолжим рассматривать полезные возможности препроцессора SASS