Переменные Sass

Переменные Sass

Переменная - это способ хранения информации, которую вы можете использовать повторно в будущем.

С помощью Sass вы можете сохранитьинформацияхранятся в переменных, например:

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

Sass использует символ $, следуемый именем, для объявления переменных:

Синтаксис переменных Sass

$variablename: value;

В следующем примере объявлены 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 Ключевые слова включены в этот файл.