SASS (Syntactically Awesome Style Sheets) - CSS-препроцессор, призванный упростить и ускорить процесс написания CSS. SASS не динамичен, то есть не получится генерировать CSS свойства в реальном времени.
Преимущества SASS перед CSS:
- Вложенность - можно вкладывать одни CSS правила в другие. Вложенные правила применяются только для элементов, соответствующих внешним селекторам.
- Переменные - в CSS так же есть переменные, но SASS делает их использование более гибким. Например использовать их в миксинах.
- Математические операции - SASS позволяет использовать можно обойтись без использования calc().
- Циклы и условия - SASS позволяет использовать @for @while и @if-else, но в итоге всё равно всё будет скомпилировано в CSS.
- Миксины - можно одни и те же свойства смешивать с другими или использовать повторно.
- Функции - можно создавать функции для многократного использования.
Вложенные правила
Вложенные правила позволяют писать правила внутри других правил. С помощью символа & можно явно указать, где должен быть вставлен родительский селектор . Пример использования:
Будет скомпилирован в:
Переменные
Переменные обозначаются знаком $. Пример использования:
Будет скомпилирован в:
Миксины
Объявляются директивой @mixin после чего следует имя миксина и, опционально, его параметры. Пример использования:
Будет скомпилирован в:
@if
Директива используется для разветвления на основе условия. Пример использования:
Будет скомпилирован в:
@for
Выводит набор стилей заданное число раз. Пример использования:
Будет скомпилирован в:
@each
Устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var. Пример использования:
Будет скомпилирован в:
@while
Принимает выражение и циклично выводит вложенные правила, пока выражение вычисляется как true. Пример использования:
Будет скомпилирован в:
Функции
В SASS как и в других языках можно использовать функции. Пример использования:
Будет скомпилирован в:
@import
Позволяет импортировать CSS из другого SASS или CSS файла. Пример использования:
Будет скомпилирован в:
@extend
В случае когда селектор должен иметь свои собственные свойства и быть дописан другими свойствами применяется директива @extend. Пример использования:
Будет скомпилирован в:
В следующей части рассмотрим встроенные функции для работы с цветами.
Автор статьи: Николай Куликов
