SASS中定义变量的公式如下:
// $符号固定,variables为变量名,expression为表达式$<variables>: <expression>;$font-size-medium: 32px / 2; // 16px$font-size-normal: 12px + 2px; // 14px$font-size-small: 12px; // 12px
SASS中的变量是命令式的,意味着你在批改变量前后,值可能不雷同的。
$font-size: 14px;.box { font-size: $font-size; // 14px}// 批改值$font-size: 16px;.item { font-size: $font-size; // 16px}
SASS默认变量
有些时候,咱们心愿定义一些变量并给默认值,这样内部用户应用的时候,能够从新定义雷同的变量,但变量的值由内部用户本人规定,此时能够应用默认变量!default:
$font-size: 14px !default;$theme-color: #4093ff !default;// 应用默认.box { font-size: $font-size; // 14px; background-color: $theme-color; // #4093ff;}// 本人定义$font-size: 16px;$theme-color: #58a;.box { font-size: $font-size; // 16px background-color: $theme-color; // #58a;}在一些组件库或者款式库中,简直都容许用户自定义款式,其本质就是默认变量在起作用。
SASS局部变量
因为SASS容许嵌套规定,所以变量也能够定义在嵌套规定中。当在嵌套规定中定义一个变量时,此变量的拜访范畴只存在于此规定内,对于内部不可见,例如:
.box { .item { $font-size: 16px; font-size: $font-size; // 16px; } .row { font-size: $font-size; // error Undefined variable }}
对于嵌套规定中雷同命名的变量,内层的变量会遮蔽外层的变量,例如:
.box { $font-size: 14px; .item { $font-size: 16px; font-size: $font-size; // 16px; }}
然而在一些流程管制语句中,变量没有遮蔽成果,例如:
$is-active: true !default;$font-size: 14px;$theme-color:#4093ff;@if $is-active { $font-size: 16px; $theme-color:#f60;}.box { font-size: $font-size; // 16px background-color: $theme-color; // #f60}