Комментарии
В CSS комментарии записываются как /* комментарий */. В SASS используется более простой синтаксис: // комментарий. Такие комментарии не попадают в сгенерированный CSS-файл.
Селекторы
Обращение к элементам HTML в SASS осуществляется с помощью CSS-селекторов: по классу, ID, атрибутам и т.д. Например, block:not(.first) выбирает все блоки без класса first.
Стилевое оформление
Пример добавления стилей:
block:not(.first) {
background: red;
height: 200px;
margin-bottom: 20px;
padding: 0;
margin: 0;
}Этот код задаёт красный фон, высоту 200 пикселей, нижний отступ 20 пикселей и обнуляет отступы и поля для всех блоков без класса first. Изменения в SASS-файле автоматически обновляются в CSS-файле (при использовании live reload).
Переменные
Переменные позволяют хранить значения (цвета, размеры и т.д.) и использовать их многократно. Переменная создаётся с помощью знака доллара $, за которым следует имя, двоеточие и значение:
$bg-color: #eaeaea;Переменная $bg-color хранит светло-серый цвет. В стилях она используется как значение свойства:
background: $bg-color;Изменение значения переменной автоматически обновляет все элементы, её использующие.
Пример переменной для ширины блока:
$block-width: 30%;Использование в стилях:
width: $block-width;Переменные могут содержать любые значения, например:
$border: 4px solid red;Использование в стилях:
border: $border;Переменные в SASS повышают читаемость, поддерживаемость и удобство изменения кода, особенно на больших веб-сайтах.