学前准备

• 学习资料：中文文档-SCSS语法：
• 学习环境：

1. codepen.io:在线学习环境---注册创建一个新的pen.

   
   
   TIM图片20190115220240.png
   
   

   代码写完可以进行保存，之后会有一个URL，可以把URL分享给被人看，别人可以看到你所写的代码。

2. vscode：本地搭建环境。

基本语法

嵌套规则 (Nested Rules)

• Sass允许将一个css样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内（可以理解为层级选择器）
• 父选择器&:表示插入指定的父选择器主要是实现BEM命名法。
• CSS中有一些属性具有相同的命名空间，比如font-size，font-family，font-weight等都在font命名空间中。所以只需要输入一次命名空间，然后在其内部嵌套属性即可。

.userCard {
    width: 100%;
    &.active {  // 嵌套modifier，一定要用`&`表示其父容器，即`userCard`
        background: yellow; 
    }
    &-name { // 嵌套元素，一定要用`&`表示其父容器，即`userCard`
        color: black;
        font: {  //嵌套属性，一定要加`:`
            size: 100px;
            weight: bold;
        }
        background: {
            color: red;
        }
    }
}

• 命名空间也可以有自己的属性

&-name {
  font: 20px/24px{
    weight: blod
    }
}

注释

• 尽可能的情况下，多行注释会被保留在输出的css中，而单行注释会被删除。
• CSS是不支持单行注释的，要想单行注释必须使用/****/
• SCSS是支持单行注释的，//表示这行被注释
• SCSS也支持多行注释/****/
• 如果多行注释的第一个字母是!，那么注释总是会被保留在输出的CSS中，即使是在压缩的模式下。
• 注释保留作用：可用于在你生成的CSS中添加版权声明。
• 使用插值语句（interplation），可以将变量输出到多行注释中。

$version: '123';
/**这是多行注释 #{$version}**/

TIM图片20190116111642.png

SassScript:

除了普通的CSS属性的语法，Sass支持一些扩展，名为SassScript。SassScript允许属性使用变量，算术和额外功能。
SassScript也可以用来生成选择器和属性名称，当编写mixins时，非常实用，这是通过interpolation(插值)完成。

交互式shell（interactive Shell）

Interactive Shell 可以在命令行中测试 SassScript 的功能。在命令行中输入 sass -i，然后输入想要测试的 SassScript 查看输出结果：

• 使用sass -i命令进行操作
  
  TIM图片20190116112432.png

变量：$ 可以有作用域

• 全局作用域变量：声明在所有的元素之前,，.userCard里面引用的所有的$red,，都渲染成一个颜色

$red: red;
.userCard {
}

• 局部作用域变量：在$-name和 &-oneSentence中，分别声明了$red,并且赋予不同的值，所以渲染的颜色是不一样的。

.userCard {
    &-name {
        $red: #f60;
        color: black;
        &:hover {
            color: $red;
        }
    }
    &-oneSentence {
        $red: red;
        color: $red;
        border: 1px solid $red;
    }
}

• 局部变量的优点：可以在一个选择器里面选择同一个数值，方便批量修改，以下示例都选择$width: 120px.

 &-description {
        $width: 120px;
        width: $width;
        height: $width;
        border-radius: $width / 2;
        border: 1px solid green;
    }

• 把局部变量强制转换成全局变量，在局部变量后加!global
$red: red !global;
  注意：一定要先声明在使用，声明在前，使用在后
• CSS变量作用域的覆盖：近的作用域会覆盖远的作用域。一个作用域既有全部变量又有局部变量，就近原则。所以以下代码最后展示橙色。

$red: #6f0; // 绿色
.userCard {
    &-name {
        $red: #f60; //橙色
        color: black;
        &:hover {
            color: $red;
        }
    }
}

TIM图片20190116101948.png

• 历史原因：$red-color和$red_color是同一个变量。

数据类型： （Data Types）

SassScript 支持7种主要的数据类型。

• 数字（12 ,23 等）
• 文本字符串，带引号字符串和不带引号字符串(例如：foo, baz)
• 颜色：(例如：blue,#04a3f9, rgba(255, 0, 0, 0.5))
• 布尔值：(例如： true, false)
• 空值（null）
• 值列表（list），用空格或者逗号分隔(例如： 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
• maps，从一个值映射到另一个(例如： (key1: value1, key2: value2))
  SassScript也支持其他所有类型的CSS属性值，比如 Unicode 字符集，或 !important声明。然而，不会对这些类型的属性值做特殊处理，一律视为不带引号的字符串。

运算

• CSS也支持运算，写法
  width: calc(200px / 2)。
• SCSS运算,一般运算和平时大家知道的一样，特别注意的是除法运算：
• 除法和 /（Division and /）

1. CSS允许/出现在属性值之间作为分隔数字的方式(例如font属性，p.ex2{font:italic bold 12px/20px arial,sans-serif;})。由于SassScript是CSS属性语法的扩展，所以它必须支持这一点，同时还允许 /用于除法。这意味着，在默认情况下，在SassScript中如果两个数字由/分隔，在返回的CSS中将以同样的方式出现。
2. 但是，这里有将/解析为除法三种情况。这些涵盖了绝大多数当做除法的案例。
   a: 如果该值，或值的任何部分，存储在一个变量中或通过函数返回。
   b: 如果该值是由括号括起来的，除非这些括号是在一个列表（list）外部，并且值是括号内部。
   c: 如果该值被用作另一个算术表达式的一部分。

p {
  font: 10px/8px;             // 原生的CSS，不作为除法
  $width: 1000px;
      width: $width/2;            // 使用了变量, 作为除法
  width: round(1.5)/2;        // 使用了函数, 作为除法
  height: (500px/2);          // 使用了括号, 作为除法
  margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
  font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
}

• 取模运算%
  100 % 3 ==== 1
• 颜色相关运算

1. 颜色转换函数： color: change-color($color:$red,$green:255);
2. 改变透明度：color: fade-out($color: $red，$amout:0.5)简单写法fade-out ( $red, 0.5)
3. 背景色半透明background: fade-out($red,0.5);
4. SCSS darken把一个颜色加深
5. 关于颜色的函数很多，自行查找

字符串插值//

• 可以在字符串里面插入任何变量，可以用在任何地方

 &::before {
            content: ''[ #{$red}'';
        }
  &::after {
            content: ']';
    }

如下图，插入[#f60]

TIM图片20190116105746.png

• 在字符串插值时，Null值被视为空字符串：

$value: null;
    p:before {
      content: "I ate #{$value} pies!";
}
// p:before {
  content: "I ate  pies!"; }

字符串运算

• +运算可用于连接字符串

p {
  cursor: e + -resize;
}
e-resize

• 如果带引号的字符串被添加到不带引号的字符串中（也就是说，带引号的字符串在 + 的左侧）， 那么返回的结果是带引号的字符串。
• 如果一个不带引号的字符串添加到带引号的字符串中（不带引号的字符串在 + 的左侧）那么返回的结果是一个不带引号的字符串。

p:before {
  content: "Foo " + Bar; // "FooBar"
  font-family: sans- + "serif"; // sans-serif
}

• 默认情况下，运算表达式与其他值连用时，用空格做连接符：

p {
  margin: 3px + 4px auto;
}
// 7px auto

• 在文本字符串中，#{}式插值可以用来在字符串中放置动态值：

p:before {
  content: "I ate #{5 + 10} pies!";
}
// I ate 15 pies!

布尔运算 (Boolean Operations)

SassScript 支持布尔值的 and, or, 和 not 运算。

列表运算 (List Operations)

数组不支持任何特殊运算，只能使用 list 函数 控制。

圆括号 (Parentheses)

圆括号可以用来影响运算的顺序(优先级)：

p {
  width: 1em + (2em * 3);
}
//p {
  width: 7em;