Переменные

Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS, которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $. Рассмотрим пример:

$color: #99ff8c
$font : sans-serif
$height : 50px
.test
  background-color : $color
  font-family: $font

.test2
  $color : red //Переопределяем цвет
  background-color : $color //red;

$color: #99ff8c;
$font : sans-serif;
$height : 50px;
.test{
  background-color : $color;
  font-family: $font;
}
.test2{
  $color : red; //Переопределяем цвет
  background-color : $color; //red;
}

.test {
  background-color: #99ff8c;
  font-family: sans-serif; }

.test2 {
  background-color: red; }
  

Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS-файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.