Scss变量

语法:

scss中的变量，以美元符号$开头，赋值方法与 css属性的写法一样。

$color:#F00;
p {
    color: $color;
}

1. 说明:

1. scss中的变量不能直接被JavaScript获取, 需要借助webpack工具

5条变量规则

下文的mixin和function命名也遵循1234条规则：

1. 变量以美元符号$开头，后面跟变量名；
2. 变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）；
3. 通过连接符-与下划线_定义的同名变量为同一变量；
4. 变量一定要先定义，后使用；
5. 写法同css，即变量名和值之间用冒号:分隔；

2种变量作用域

1. 变量作用域分为全局变量域和局部变量域：
   • 全局变量：声明在最外层的变量，可在任何地方使用；
   • 局部变量：嵌套规则内定义的变量只能在嵌套规则内使用。
2. 将局部变量转换为全局变量可以添加!global 声明。

$color: red;
.container {
    $height: 500px;
    $font-size: 16px !global;
    font-size: $font-size;
    color: $color;
    height: $height;
}
.footer {
    /**$font-size使用!global 申明成全局变量了*/
    font-size: $font-size; 
    /**
    * Error: Undefined variable. 
    * $height是.container下的局部变量，无法在.footer下面编译
    */
    height:$height;
}

7种主要的数据类型

scss支持7种主要的数据类型：

1. 数字，1rem、2vh、13、 10px；
2. 字符串，分有引号字符串与无引号字符串，"foo"、 'bar'、baz；
   1. scss属性也支持其他值，比如Unicode字符集，或!important 声明。但是scss 不会特殊对待这些属性值，一律视为无引号字符串。
3. 颜色，blue、#04a3f9、rgba(255,0,0,0.5)；
4. 布尔型，true和false；
5. 空值，null是其类型的唯一值。表示缺少值，通常由函数返回以表示缺少结果；
   1. 没有undefined
   2. 如果列表中包含空值，则生成的CSS中将忽略该空值。
6. 数组 (list)，用空格或逗号作分隔符
   1. 实例：1.5em 1em 0 2em,Helvetica,Arial,sans-serif；
7. maps， 相当于 JavaScript 的 object
   1. 实例：(key1: value1, key2: value2)；
8. 官网中把Function也当作一种类型，点击原文了解。

5. 声明默认值: !default

可以在变量的结尾添加!default来给变量设置默认值 有点类似Javascript的逻辑运算符let content=content || "Second content"。 注意，变量是 null时将视为未被!default赋值。

$content: "First content";
// 如果$content之前没定义就使用如下的默认值
$content: "Second content" !default;
#main {
    content: $content;
}

编译成css

#main {
  content: "First content";
}