Переменные в SASS

Переменные начинаются со знака доллара $ и задаются как свойства CSS:

$width: 5em

Вы можете обратиться к ним из свойств:

#main

width: $width

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

#main

$width: 5em !global

#sidebar

width: $width

компилируется в:

#main

width: 5em

 

#sidebar

width: 5em