Август 2017
Автор: Рубрика: Верстка Комментариев нет

Настраиваем препроцессор sass


Настраиваем препроцессор sass

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

Рассмотрим его сильные стороны.

Это совместимость с разными версиями css, поэтому можно использовать любые css библиотеки в проекте.

Также синтаксис sass упрощает работу и разнообразит разработку.

Настройка окружения для работы

Подключаем sass используя gulp.

Убедитесь, что у вас установленная последняя версия gulp и node.js.

Для это пропишем команды npm –v и gulp –v.

Если не установлено, то переходим в статью как установить gulp.

Для установки пакетов пропишем команду npm I –save-dev gulp gulp-sass.

После установки пакетов появится node_modules.

проверка версии gulp и node.js

Создадим gulpfile.js и прописываем.

Разберем подробно файл.

Первой строкой мы подключаем gulp и присваиваем его к переменной gulp.

Следующая строка подключает sass пакет.

Затем создаем таск sass, который будет преобразовывать sass в css.

Вначале берем источник все sass файлы в папке sass и всех подпапках.

Далее преобразуем sass в css со следующими параметрами expanded для того, чтобы на выходе получился развернутый css.

Стили также бывают вложенными, компактными и сжатыми с соответствующими параметрами.

Благодаря обработке on error мы увидим в какой строке sass файла у нас ошибка.

И в заключении выводим в папку css готовые стили.

Таском watch наблюдаем за изменением sass и если появляются изменения, то выполняем таск sass, из квадратных скобочек мы ссылаемся на таск sass.

К дефолтному таску приравниваем таск watch, чтобы он выполнялся по умолчанию.

Запустим gulp через командную строку. Gulp.

Создадим папку css и создадим папку sass, в которой будут лежать все исходники.

Добавим main.sass и в нем зададим стиль любой, например, background-color: #green.

Увидим, что в папке css появится файл main.css, откроем его и увидим автоматически скомпилированный стиль.

автоматически из sass в css

Синтаксис sass

Есть два вида вида написания sass и scss.

Мы будем использовать вариант написания с отступами.

Расширение для этого синтаксиса .sass.

Этот синтаксис требует четкого соблюдения отступов при написании.

Используем в документе только tab, без пробелов.

Правила вложения

Sass дает возможность использовать вложение одних css правил в другие.

Этим сокращается время на написание и копирование длинных селекторов, делая код структурированным с четкой иерархией.

Первый пример, есть .main-menu с дочерним селектором ul и li.

Это компилируется в отдельный селектор .main-menu ul и .main-menu li, тем самым сокращается время.

Вложеный селектор sass
Второй пример это привязка к родительскому селектору с помощью знака амперсанда &, тем самым расширяем родительский селектор, а не создаем дочерний.

Привязка к родительскому селектору

Вложенные свойства

Для удобства можно разбивать суффикс пространства имен свойства на вложения.

Можно любые css свойства, в которых содержится черточка разбивать на вложенные свойства.

свойства sass

Селекторы шаблоны.

Иногда несколько элементов страницы используют одну и туже css базу, эти правила можно оформить в виде селектора шаблона, для использования в разных местах sass.

Селекторы шаблоны выводятся при помощи директивы extend, задаются со знаком процента.

Extend подключаем два элемента, а в css появляются через запятую все селекторы, в которых есть extand и в итоге они содержат одинаковый набор правил.

директива extend

Переменные в sass

Зададим переменную. Пропишем название переменной, двоеточие и значение переменной.

При интерполяции мы будем получать новые значения используя другие.

Третий пример, это сложение.

Интерполяция и оперции сложения в sass

Директивы и правила

Импортируем все свойства из файла home в селектор используя @import.

Директива @at-root поднимает содержимые в ней файлы в корень, отменяя цепочку от родителя.

директива at-root и import

Sass поддерживает использование выражений и функций.

Разберем пример. Директива @for выводит блок со стилями определенное количество раз.

Во время выполнения можно задать переменную счетчика i.

Если нужно пройтись по списку значений используем директиву @each.

Дериктива @for и @each

Миксины

Это блоки sass кода, которые могут принимать аргументы и сокращают затраты время на применения однотипных правил.

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

Миксин объявляется директивой @mixin, после его имя и в скобках аргументы.

Выводим миксин через @include. Пример.

миксин

Комментариев нет