Sass Змінні
Sass Змінні
Змінні - це спосіб зберігати інформацію, яку ви можете знову використовувати.
За допомогою Sass ви можете зберігати інформацію в змінних, наприклад:
- strings / рядки
- numbers / числа
- colors / кольори
- booleans / булеві
- lists / списки
- nulls / нулі
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.
