Как упростить работу с CSS при верстке сайта

Когда Вы работаете с CSS, особенно, если проект масштабный, то могут возникнуть проблемы с обслуживанием файлов CSS. И тут на помощь нам придет препроцессор Sass. Данный инструмент заслуженно набрал популярность в среде верстальщиков, а теперь давайте немного разберем его главные особенности и вообще как с ним работать.

Самый простой способ работы с Sass — это установка программы Koala, которая будет компилировать ваш Sass в CSS. Вам всего лишь нужно писать Ваш код в файле .sass, а Koala сделает все остальное.

Установка Koala

Сначала Вам необходимо установить программу Koala, которая в автоматическом режиме будет обрабатывать Ваши Sass файлы и создавать из них минимизированные файлы min.css, а также обычные файлы с разрешением .css. После этого добавьте всю папку Вашего сайта в данный проект, а в самом проекте создайте файл с разрешением .sass. Все! Теперь Вы готовы работать с препроцессором.

Sass — особенности

Самая подробная информация о Sass расположена на их официальном сайте, здесь же я расскажу про самые главные особенности.

Переменные

Да, в Sass Вы можете использовать переменные. Допустим Вы можете задать в переменные определенный шрифт или цвет и использовать данную переменную в своем документе. Согласитесь, это очень круто.

Вложенности

Если обычный CSS, это простыня из кода, то в Sass у нас появляется вложенность, благодаря которой весь Ваш документ обретает четкую иерархическую структуру, удобную для понимания и работы.

Фрагментирование

В Sass Вам доступна возможность создавать разные файлы для определенных страниц, разделов Вашего сайта, при этом компилятор, в нашем случае программа Koala будет понимать, что это часть единого файла и не продолжит создавать единый .css файл. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss. Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import.

Импорт

Собственно вытекает из предыдущей особенности. Теперь Вы можете импортировать части Вашего Sass в единый документ, при этом работая с разными частями. Что облегчает работу со всем проектом.

Наследование

На мой взгляд одна из самых важных особенностей, которая позволяет Вам скопировать мгновенно все стили определенного элемента, не прибегая к копированию его кода. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте».  Более подробно читайте в документации к Sass.

Математические операторы

В Sass файлах Вы сможете использовать у свойств математические операторы. Например: width: 600px / 960px * 100%. Лично я в своей деятельности очень редко применяю данное свойство Sass.