Переменные

Самое простое, что поддерживает SassScript - это использование переменных. Переменные начинаются со знака доллара $ и задаются как свойства CSS:

$width: 5em;

// Вы можете обратиться к переменной в свойствах
#main {
  width: $width;
}

$width: 5em

// Вы можете обратиться к переменной в свойствах
#main
  width: $width

Переменные доступны только в пределах того уровня вложенности селекторов, на котором они определены. Если они определяются вне каких-либо вложенных селекторов, они доступны глобально. Если вы хотите, чтобы объявленная на каком-либо уровне вложенности переменная также была доступна глобально, вы можете определить её со специальной меткой !global. Например:

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

#main
  $width: 5em !global
  width: $width

#sidebar
  width: $width

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}