Что такое Sass и как его использовать

Что такое Sass, зачем он нужен, его возможности, установка и как его использовать в своих проектах

Что такое Sass

Sass (Syntactically Awesome Stylesheets) - это один из самых развитых, стабильных и многофункциональных препроцессоров. Пользуется большой популярностью у разработчиков. Sass - это более продвинутая версия CSS, которая имеет гораздо бо́льший набор возможностей, а также Sass предназначен для упрощения каскадных таблиц стилей.

Синтаксис Sass имеет 2 вида: SASS и SCSS. SCSS - более похож на CSS, а SASS - отличается отсутствием фигурных скобок. Вложенные элементы реализованы за счёт отступов. Именно такой синтаксис мы будем здесь использовать.

Зачем нужен Sass

Чтобы понять, зачем нужен Sass, перечислим его некоторые возможности:

1. Sass позволяет вкладывать правила CSS друг в друга
2. Вложенность свойств
3. Использование переменных
4. Поддержка арифметических операций
5. Операции с цветами
6. Возможность импортировать в sass файл sass, scss и css файлы
7. Использование миксинов
8. И многое другое

Если коротко зачем нужен Sass: он ускоряет и упрощает процесс разработки.

Как использовать Sass

Существуют разные способы начать использовать Sass:

1. C помощью приложений (Koala, CodeKit, Compass и другие)
2. C помощью командной строки
3. Используя таск-менеджеры
4. Простым конвертированием Sass в CSS с помощью онлайн-сервисов

Рассмотрим использование Sass для таск-менеджера Gulp. Перед тем как начать установку, желательно ознакомиться с основами Gulp.

Установка и подключение gulp-sass

Для установки плагина gulp-sass в наш проект, откроем командную строку в папке проекта. Введём следующую команду:

npm i gulp-sass --save-dev

Плагин будет установлен в папку node_modules и будет добавлена соответствующая запись в файле package.json. После успешной установки нам нужно подключить наш пакет в файле gulpfile.js.

var gulp = require('gulp');
    sass = require('gulp-sass');

Теперь создадим таск sass.

gulp.task('sass', function(){
 return gulp.src('app/sass/main.sass')
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('app/css'));
});

gulp.src - Что берём для обработки

.pipe(sass()) - Конвертируем Sass в CSS

sass() - в скобках можно задать дополнительные настройки отображения CSS на выходе.
Например, sass({outputStyle: 'expanded'}) - полностью развёрнутый CSS.
Другие значения: nested (по умолчанию), compact - каждый селектор на разной строке, compressed - всё в одну строку.

Если вдруг мы допустим ошибку, то можно вывести на экран сообщение в каком месте она находится. Для этого добавим .on('error', sass.logError).

pipe(gulp.dest()) - Куда сохранить получившийся файл

Выполним наш созданный таск gulp-sass. В командной строке введём gulp sass.

Gulp автоматически преобразовал SASS в CSS и создал файл main.css.

Если нужно выбрать не один файл, а несколько, то можно выбрать все файлы сразу. Для этого изменим немного строку, где мы выбираем sass-файлы для конвертации:

gulp.src('app/sass/**/*.sass')

sass/**/*.sass - означает выбор всех файлов (с расширением .sass) во всех папках папки sass.

Резюмируем: подключили плагин gulp-sass, создали таск sass и добавили вывод ошибки (если таковая возникнет). Теперь можно сделать дефолтный таск. Т.е. наш такск gulp-sass будется запускаться командой gulp.

gulp.task('default', ['sass']);

Получаем следующий gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
 return gulp.src('app/sass/**/*.sass')
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('app/css'))
});

gulp.task('default', ['sass']);

Возможности Sass на примерах

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

Вложенность правил

Ссылка на родительский селектор &

Вложенность свойств

Использование переменных $

Арифметические операции с числами

Арифметические операции с цветами

Функции

Использование функций в sass официальный сайт

Импорт .sass, .scss и .css файлов

Использование миксинов

Полезные ссылки

• Настройка Gulp
• Страница плагина gulp-sass
• Документация Sass официальный сайт
• Фукции Sass