SASS фактически дает нам множество программных преимуществ работы с кодом, только теперь с возможностью применять его к таблицам стилей.

В следующих нескольких постах мы подробно рассмотрим возможности SASS.

Сначала давайте представим переменные.


Определение

Переменные — это способ хранения информации, которую вы хотите повторно использовать в своей таблице стилей.

Они позволяют нам хранить значения цветов, шрифтов или любые значения CSS, которые вы хотите использовать повторно!

Мы используем $ символ, когда мы хотим сделать что-то переменной.


Пример

В нашем SCSS давайте определим переменную цвета:

$color-primary: #ffff00; // Yellow

body {
  background-color: $color-primary;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это, конечно, установит наш background-color до желтого. Это так просто!

Примечание. Вы можете использовать однострочные комментарии в Sass с //.

Когда мы затем запустим нашу компиляцию, она выведет следующий CSS:

body {
  color: #ffff00;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Примечание. Далее в этой серии мы рассмотрим процесс компиляции. Сейчас полезно знать, что когда мы сохраняем наш код в sass/main.scssон автоматически скомпилируется в css/style.css файл!

Это становится чрезвычайно мощным при работе над большими проектами!

Если вы хотите внести изменения в цвет, используемый во всех ваших таблицах стилей, гораздо проще изменить, если цвет определен в одном месте как одна переменная.

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


Вывод

Если вам понравился этот пост в блоге, подписывайтесь на меня Твиттер где я ежедневно публикую сообщения о вещах, связанных с технологиями!


🌎 Подключаемся