Sass — препроцессор для CSS, позволяющий писать стили быстрее и эффективнее с использованием переменных, функций, миксинов, наследования и других возможностей. Он расширяет функциональность CSS, добавляя циклы, функции и улучшенное наследование. Рекомендуется предварительно освоить CSS.
Sass vs. SCSS
Sass и SCSS — одна технология, разработанная одной компанией. Sass появился раньше, SCSS — позже. Разница только в синтаксисе:
- Sass: использует отступы для определения блоков кода. Вложенность элементов и свойств обозначается увеличением отступов.
- SCSS: использует фигурные скобки {} для определения блоков кода, аналогично CSS. Этот синтаксис привычнее разработчикам, знакомым с CSS.
В дальнейшем используется SCSS, но можно выбрать любой синтаксис — оба преобразуются в стандартный CSS.
Установка и первый проект
Для работы с Sass можно использовать:
- Графический интерфейс: программы-компиляторы (например, Koala или Prepros) позволяют легко конвертировать Sass/SCSS в CSS. Многие программы платные, но бесплатные версии часто достаточно функциональны.
- Командная строка: требует установки Ruby (на macOS обычно уже установлен) и использования командной строки для компиляции. Менее удобен, но предпочтителен некоторыми разработчиками.
Далее используется графический интерфейс.
Создание файлов проекта
Создайте проект в текстовом редакторе (например, Atom). Рекомендуется использовать расширение Emmet для ускорения написания HTML-кода. Создайте:
- index.html — HTML-файл.
- css/style.css — файл для скомпилированного CSS-кода.
- scss/style.scss — файл с кодом на SCSS.
Подключите style.css в index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой проект</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>Настройка компилятора
Добавьте проект в программу-компилятор, перетащив папку проекта. Программа автоматически обнаружит файлы style.css и style.scss. Настройте автоматическую компиляцию SCSS в CSS при сохранении файла. Можно также включить автоматическое добавление префиксов и минификацию CSS.
Первый пример кода
В style.scss:
div {
background: red;
}Сохраните файл. Программа скомпилирует SCSS в CSS, и изменения отобразятся на странице index.html.
Автоматическая перезагрузка браузера
Программа обычно поддерживает автоматическую перезагрузку браузера при изменении файлов.
В этом уроке рассмотрены основы Sass и SCSS, установка компилятора и создание первого проекта. В следующих уроках будут рассмотрены переменные, функции и миксины.