Використання Змінних Sass для Багаторазових Стилів
Першою корисною функцією є наявність змінних. Можна зберігати та повторно використовувати значення у коді. Це дуже схоже на мови програмування, які дозволяють створити змінну один раз і використовувати її кілька разів. Щоб оголосити змінну, потрібно поставити знак долара ($) і назву змінної, після чого вказати двокрапку (:) та присвоїти значення.
$textPrimaryColor: #49423c;
Note
Можна використовувати будь-яку нотацію іменування, наприклад, kebab case (
text-primary-color), snake case (text_primary_color) або camel case (textPrimaryColor). Головне — дотримуватися однакової нотації іменування у всьому проєкті.
Уявімо, що нам потрібно створити розмітку, у якій весь текст має колір #474943 і розмір шрифту 24px. Sass-файл виглядатиме так:
$textColor: #474943;
$textFontSize: 24px;
p {
color: $textColor;
font-size: $textFontSize;
}
Ми завжди намагаємося робити назви змінних максимально описовими, щоб було зрозуміло, за що відповідає кожна змінна.
Перевага полягає в тому, що це спрощує внесення змін у дизайн проєкту в майбутньому. Якщо зміниться розмір шрифту або колір тексту, достатньо оновити значення змінних $textColor та $textFontSize, і зміни застосуються до всього проєкту.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain more about how variables work in Sass?
What are some best practices for naming variables in Sass?
Can I use variables for other CSS properties besides color and font size?
Awesome!
Completion rate improved to 2.04Використання Змінних Sass для Багаторазових Стилів
Свайпніть щоб показати меню
Першою корисною функцією є наявність змінних. Можна зберігати та повторно використовувати значення у коді. Це дуже схоже на мови програмування, які дозволяють створити змінну один раз і використовувати її кілька разів. Щоб оголосити змінну, потрібно поставити знак долара ($) і назву змінної, після чого вказати двокрапку (:) та присвоїти значення.
$textPrimaryColor: #49423c;
Note
Можна використовувати будь-яку нотацію іменування, наприклад, kebab case (
text-primary-color), snake case (text_primary_color) або camel case (textPrimaryColor). Головне — дотримуватися однакової нотації іменування у всьому проєкті.
Уявімо, що нам потрібно створити розмітку, у якій весь текст має колір #474943 і розмір шрифту 24px. Sass-файл виглядатиме так:
$textColor: #474943;
$textFontSize: 24px;
p {
color: $textColor;
font-size: $textFontSize;
}
Ми завжди намагаємося робити назви змінних максимально описовими, щоб було зрозуміло, за що відповідає кожна змінна.
Перевага полягає в тому, що це спрощує внесення змін у дизайн проєкту в майбутньому. Якщо зміниться розмір шрифту або колір тексту, достатньо оновити значення змінних $textColor та $textFontSize, і зміни застосуються до всього проєкту.
Дякуємо за ваш відгук!
