Променливите са начин за съхраняване на информация, която можете да използвате повторно по-късно.

С Sass можете да съхранявате информация в променливи, като:

• струни
• числа
• цветове
• булеви
• списъци
• нула

Sass използва символа $, последван от име, за да декларира променливи:

Синтаксис на променлива Sass:

Следващият пример декларира 4 променливи с име myFont, myColor, myFontSize и myWidth. След като променливите бъдат декларирани, можете да използвате променливите, където пожелаете:

Синтаксис на SCSS:

Така че, когато файлът Sass се транслира, той взема променливите (myFont, myColor и т.н.) и извежда нормален CSS със стойностите на променливите, поставени в CSS, по следния начин:

CSS изход:

Sass променлив обхват

Променливите Sass са налични само на нивото на влагане, където са дефинирани.

Вижте следния пример:

Синтаксис на SCSS:

Цветът на текста в <p>етикета ще бъде ли червен или зелен? Ще бъде червено!

Другото определение, $ myColor: зелено; е вътре в <h1>правилото и ще бъде достъпно само там!

И така, изходът на CSS ще бъде:

Добре, това е поведението по подразбиране за променливия обхват.

Използване на Sass! Глобално

Поведението по подразбиране за променлив обхват може да бъде заменено с помощта на !globalпревключвателя.

!global показва, че променливата е глобална, което означава, че е достъпна на всички нива.

Погледнете следния пример (същият като горния; но с !globalдобавен):

Синтаксис на SCSS:

Сега цветът на текста в <p>тага ще бъде зелен!

И така, изходът на CSS ще бъде:

CSS изход:

Съвет: Глобалните променливи трябва да се дефинират извън всякакви правила. Би било разумно да дефинирате всички глобални променливи в собствения си файл, наречен „_globals.scss“, и да включите файла с ключовата дума @include .