7 Август 2017

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

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

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

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

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

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

Содержание статьи

1 Настройка окружения для работы
- 1.1 Создадим gulpfile.js и прописываем.
2 Синтаксис sass
- 2.1 Правила вложения
3 Вложенные свойства
- 3.1 Селекторы шаблоны.
- 3.2 Переменные в sass
4 Директивы и правила
5 Миксины

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

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

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

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

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

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

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

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

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

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']);

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 в 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