Sass Переменные
Sass Переменные
Переменные - это способ хранения информации, которую вы можете использовать позже.
С помощью Sass вы можете хранить информацию в переменных, например:
- строки
- числа
- цвета
- булевы
- списки
- нули
Для объявления переменных Sass использует символ $, за которым следует имя:
Синтаксис переменных Sass:
$имяПеременной: значение;
В следующем примере объявляются 4 переменные с именами myFont, myColor, myFontSize и myWidth. После объявления переменных вы можете использовать переменные где угодно:
SCSS Синтаксис:
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
Итак, когда файл Sass переносится, он принимает переменные (myFont, myColor и т.д.) и выводит обычный CSS со значениями переменных, помещенными в CSS, например:
CSS Вывод:
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
Sass Область действия переменной
Переменные Sass доступны только на уровне вложенности, на котором они определены.
Посмотрите на следующий пример:
SCSS Синтаксис:
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor;
}
Будет ли цвет текста внутри тега <p> красным или зеленым? Он будет красным!
Другое определение, $myColor: green; находится внутри правила <h1> и будет доступен только там!
Таким образом, вывод CSS будет таким:
CSS вывод:
h1 {
color: green;
}
p {
color: red;
}
Хорошо, это поведение по умолчанию для области переменной.
Использование Sass !global
Поведение по умолчанию для области действия переменной можно изменить с помощью переключателя !global.
!global указывает, что переменная является глобальной, что означает, что она доступна на всех уровнях.
Посмотрите на следующий пример (такой же, как и выше, но с добавлением !global):
SCSS Синтаксис:
$myColor: red;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
Теперь цвет текста внутри тега <p> будет зеленым!
Таким образом, вывод CSS будет:
CSS вывод:
h1 {
color: green;
}
p {
color: green;
}
Примечание: Глобальные переменные следует определять вне каких-либо правил. Было бы разумно определить все глобальные переменные в отдельном файле с именем "_globals.scss", и включением файла с ключевым словом @include.
