sass中的变量

sass中的变量定义、调用

sass中的变量以美元符号（$）开头，赋值方法与 CSS 属性的写法一样，例如：

直接使用即调用变量：

变量名不能以数字开头

变量名不能以数字开头，可以包含字母、数字、下划线、横线（连字符）。

变量支持块级作用域

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。
例如：

将局部变量转换为全局变量可以添加 !global 声明

例如：

变量名中，下划线、短横线可以互换使用

例如：

将$border_color和$border-color的定义互换个顺序：

后定义的样式享有优先权

例如：

变量要先定义，后使用

例如，先使用、后定义，编译报错：

变量值的类型

https://sass-lang.com/documentation/values/

• 数字，可能包含单位、或不包含单位，例如12、或者100px
  
  

• 字符串：有引号字符串、或无引号字符串，例如"hello"、或者bold。

• 颜色：可以是十六进制（例如#c6538c）、名字（例如blue）、或者由函数返回（例如 rgb(107, 113, 127) ）。
  

• 布尔型：true 和 false
  

• 空值：null
  

• 数组（list）：用空格或者逗号分隔，例如1.5em 1em 0 2em, Helvetica, Arial, sans-serif。
  

• 映射（maps）：将键和值关联起来，例如(“background”: red, “foreground”: pink)
  

变量的默认值

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

例如：