Переменные в Sass

Одной из первых причин, почему люди обращаются к Sass, является существование переменных CSS.

Вам когда-нибудь приходилось искать и заменять множество вхождений одного и того же значения CSS? Если да, то переменные вам помогут.

Синтаксис

Вам необходимо начинать переменную со знака доллара ($):

$yellow: #fce473;

Эта строка ничего не делает, кроме определения переменной, в нашем случае оттенка жёлтого:

Затем мы можем использовать эту переменную во всём нашем CSS, всякий раз, когда требуется цветной блок:

.quote { border-left: 5px solid $yellow; }

Когда этот файл .scss будет скомпилирован в файл .css, то все переменные будут заменены на их реальное значение:

.quote { border-left: 5px solid #fce473; }

Устанавливайте переменную только один раз

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

$pink: #ff1493;
.quote { border-left: 5px solid $pink; }
.button { background: $pink; }
.sidebar a:hover { border-bottom-color: $pink; }
.footer a { color: $pink; }

Это будет скомпилировано в:

.quote { border-left: 5px solid #ff1493; }
.button { background: #ff1493; }
.sidebar a:hover { border-bottom-color: #ff1493; }
.footer a { color: #ff1493; }

Если вы решили перейти на другой оттенок розового:

То вам следует изменить значение цвета один раз:

$pink: #c71585;

И в результате CSS автоматически обновится:

.quote { border-left: 5px solid #c71585; }
.button { background: #c71585; }
.sidebar a:hover { border-bottom-color: #c71585; }
.footer a { color: #c71585; }

Больше абстракции

Теперь предположим, что вы на самом деле хотите использовать не розовый в качестве основного цвета, а зелёный!

Вы должны определить переменную $green: #32cd32 и заменить в вашем CSS все $pink на $green.

Существует лучший способ:

// Определяем значения цвета
$yellow: #fce473;
$pink: #c71585;
$green: #32cd32;
$blue: #1d90ff;
  
// Определяем основной цвет
$primary-color: $green;
  
.quote { border-left: 5px solid $primary-color; }
.button { background: $primary-color; }
.sidebar a:hover { border-bottom-color: $primary-color; }
.footer a { color: $primary-color; }

Вместо непосредственной ссылки на переменную $green, вы определяете переменную для основного цвета, которая устанавливается как $green.

Если задумаетесь об этом, то в действительности вы не хотите использовать $green во всём CSS. На самом деле вы хотите использовать основной цвет, который оказался зелёным.

Если вы решили задействовать $blue в качестве основного цвета, то должны поменять единственную строку.

Для значения любого типа

Мы использовали переменные для определения цвета, но вы можете установить любой тип содержимого:

// Цвета
$yellow:              #fce473;
$pink:                #c71585;
$green:               #32cd32;
$blue:                #1d90ff;
  
$primary-color:       $blue;
$secondary-color:     $yellow;

// Шрифты
$serif:               "Lora", "Playfair Display", Georgia, serif;
$sans-serif:          "Roboto", "Source Sans Pro", "Open Sans", Arial, sans-serif;
$monospace:           "Inconsolata", monospace;
  
$primary-font:        $sans-serif;
$secondary-font:      $serif;

// Расстояние
$mobile-space:        10px;
$desktop-space:       35px;

Перейти к заданиям