Змінні Scss просто покажчик місця заповнення, де ви можете призначити значення імені, яке починається з $, а потім ви можете посилатися на це ім’я замість самого значення у своїх таблицях стилів. Вони надають спосіб визначити значення один раз і використовувати його в багатьох місцях, що полегшує підтримку узгодженості та оновлення.
Змінні SCSS оголошуються за допомогою символу `$`, за яким слідують ім’я та значення, наприклад: $primary-color: #007bff; Це оголошує змінну під назвою $primary-color і присвоює їй значення #007bff. Змінні SCSS є блоковими, що означає, що вони доступні в дужках, де вони були оголошені.
зухвалий або . файл scss. Ви також можете імпортувати файли CSS. Директива @import імпортує файл, і будь-які змінні або міксини, визначені в імпортованому файлі, потім можна використовувати в основному файлі.
Оголошення змінної в SASS: у SASS ви можете визначити змінну за допомогою використовуючи символ $ на початку назви змінної, а потім її значення. Розуміння області дії змінної: змінні SASS можна оголосити будь-де в документі перед його використанням.
Щоб зробити змінні Sass (або, зокрема, SCSS у цьому випадку) доступними для JavaScript, нам потрібно «експортувати» їх. Блок :export — це чарівний соус, який webpack використовує для імпорту змінних.
SASS має вільний синтаксис, який не використовує крапки з комою та має багато пробілу. SCSS більш виразний і орієнтований на синтаксис. SCSS більше схожий на CSS, тому крапка з комою та квадратні дужки є обов’язковими. Підтримує SassDoc для додавання документації.