Sass это один из наиболее стабильных препроцессоров и самый популярный у профи.
Рассмотрим его сильные стороны.
Это совместимость с разными версиями css, поэтому можно использовать любые css библиотеки в проекте.
Также синтаксис sass упрощает работу и разнообразит разработку.
Содержание статьи
Настройка окружения для работы
Подключаем sass используя gulp.
Убедитесь, что у вас установленная последняя версия gulp и node.js.
Для это пропишем команды npm –v и gulp –v.
Если не установлено, то переходим в статью как установить gulp.
Для установки пакетов пропишем команду npm I –save-dev gulp gulp-sass.
После установки пакетов появится node_modules.
Создадим gulpfile.js и прописываем.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var gulp = require('gulp'); sass = require('gulp-sass'); gulp.task('sass', function() { return gulp.src('app/sass/**/*.sass') .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) .pipe(gulp.dest('app/css')) }); gulp.task('watch', function(){ gulp.watch('app/sass/**/*.sass', ['sass']) }); gulp.task('default', ['watch']); |
Разберем подробно файл.
Первой строкой мы подключаем 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
Есть два вида вида написания sass и scss.
Мы будем использовать вариант написания с отступами.
Расширение для этого синтаксиса .sass.
Этот синтаксис требует четкого соблюдения отступов при написании.
Используем в документе только tab, без пробелов.
Правила вложения
Sass дает возможность использовать вложение одних css правил в другие.
Этим сокращается время на написание и копирование длинных селекторов, делая код структурированным с четкой иерархией.
Первый пример, есть .main-menu с дочерним селектором ul и li.
Это компилируется в отдельный селектор .main-menu ul и .main-menu li, тем самым сокращается время.
Второй пример это привязка к родительскому селектору с помощью знака амперсанда &, тем самым расширяем родительский селектор, а не создаем дочерний.
Вложенные свойства
Для удобства можно разбивать суффикс пространства имен свойства на вложения.
Можно любые css свойства, в которых содержится черточка разбивать на вложенные свойства.
Селекторы шаблоны.
Иногда несколько элементов страницы используют одну и туже css базу, эти правила можно оформить в виде селектора шаблона, для использования в разных местах sass.
Селекторы шаблоны выводятся при помощи директивы extend, задаются со знаком процента.
Extend подключаем два элемента, а в css появляются через запятую все селекторы, в которых есть extand и в итоге они содержат одинаковый набор правил.
Переменные в sass
Зададим переменную. Пропишем название переменной, двоеточие и значение переменной.
При интерполяции мы будем получать новые значения используя другие.
Третий пример, это сложение.
Директивы и правила
Импортируем все свойства из файла home в селектор используя @import.
Директива @at-root поднимает содержимые в ней файлы в корень, отменяя цепочку от родителя.
Sass поддерживает использование выражений и функций.
Разберем пример. Директива @for выводит блок со стилями определенное количество раз.
Во время выполнения можно задать переменную счетчика i.
Если нужно пройтись по списку значений используем директиву @each.
Миксины
Это блоки sass кода, которые могут принимать аргументы и сокращают затраты время на применения однотипных правил.
Это наподобие функции, которая принимает аргумент, выполняет работу и выдает результат в зависимости от входного параметра.
Миксин объявляется директивой @mixin, после его имя и в скобках аргументы.
Выводим миксин через @include. Пример.