SASS | Переменные

Опубликовано: 18 Декабря, 2021

В этой статье содержится информация о том, как определить переменную в SASS и об области действия переменной.

Предпосылка: переменные в CSS

Преимущества переменной:

Уменьшает повторение одного и того же снова и снова.
Мы можем выполнять математические операции над такими переменными, как +, -, /, * и т. Д., Что значительно упрощает нашу работу.

Объявление переменной в SASS: в SASS вы можете определить переменную, используя символ $ в начале имени переменной, за которым следует ее значение.

Файл SCSS:

 $textcolor: blue ;
 size $ : 10px ;
 $border_changes: solid rgba( 1px 255 , 153 , 153 , 0.2 );
 
#para 1 {
    color : $textcolor;
    font-size : $size;
    border : $border_changes;
 }
 
// You can also use other variables
 // in the declaration of a variable
 
$border_changes 2: solid 1px $textcolor;
 
#para 2 {
    color : $textcolor;
    font-size : $size;
    border : $border_changes 2 ;
 }

Скомпилированный файл CSS:
#para 1 {
color : blue ;
font-size : 10px ;
border : 1px solid rgba( 255 , 153 , 153 , 0.2 );
}

#para 2 {
color : blue ;
font-size : 10px ;
border : 1px solid blue ;
}

Понимание области действия переменной: переменные SASS могут быть объявлены в любом месте документа до того, как они будут использованы.

Глобальные переменные: переменные, объявленные в верхней части файла, являются глобальными, т. Е. Вы можете использовать их в любом месте документа.
Переменные с заданной областью: переменные, объявленные в любом блоке, имеют ограниченную область видимости, т. Е. Вы не можете использовать ее вне области действия блока.

Файл SASS:

 $global: #FF0000 ;
 
#para 1 {
    $local: #F0F000 ;
    color : $ local ;
    border : 1px solid $ local ;
 }
 
// You can not use $ local outside of its
 // #para 1 { } block .
 // This will generate error
 // saying "undefined variable"
 
$global_onwards: #00FEF0 ;
 
h 1 {
    // You can not use $ local here
    color : $global;
 
    // You can use $global_onwards,
    border : solid 1px $global_onwards;
 }

Скомпилированный файл CSS:

Есть и другие концепции переменных, такие как затенение переменной, значение переменной по умолчанию, объявление переменных Flow-control, которые будут обсуждаться в следующих статьях.

Вопросы о Web технологиях CSS

SASS | Переменные

РЕКОМЕНДУЕМЫЕ СТАТЬИ