Sass 预处理器

      Sass 预处理技术
    强化css的辅助工具，增加了变量（variabs），嵌套（nested rules），混合（mixins），导入（inline imports）。
    通过函数（hsla，max，floor）
    提供控制指令（if，for，each）
    Scss 在css3语法基础上进行拓展
    Sass 早期 缩进格式
    vscode搜easy sass 插件
        setting.json
    1，变量
         “$”符号
    2，
    群组嵌套

    ```
    $bg-color:#cbecec; /* 引入变量*/
      /* 群组选择器嵌套*/
      .container{
            h1,h2,h3{
                color: $bg-color;
            }
      }
    ```

    嵌套css

    ```
    /*  嵌套CSS*/
    .container{
        h1{
                color: $bg-color;
        }
        p{
                margin: 0;

        }
        border-bottom: #cbecec;
        table{
            tr{
                color: #cbecec;
            }
        }
    }
    ```

    标识符

    ```
    /*标识符&*/
    .container a{
        color: #cbecec;
        &:hover{
            color: red;
        }
    }
    .container table{
        color:black;

    }
    ```

    层次选择器嵌套

    ```
    /*层次选择器>+~嵌套*/
    .container{
        >{
            div{
                color: #cbecec;
                border-radius: 50%;
            }
        }
        ~{
            div{
                border: 1px solid red;
            }
        }
        table+&{
            margin-left: 0;
        }
    }
    ```

    以及嵌套导入

    ```
    /* 嵌套导入*/
    .container{
        border: {
            radius:50%;
            style:solid;
            color: $bg-color;
        }
        @import "introduce";
    }
    ```

    个人感受 

    sass用起来非常便利 节省了代码的重复率 

    特别是嵌套导入能够解决很多问题，要养成写注释的习惯 导入的时候容易迷失
    1变量声明，变量引用

    变量声明：scss使用$声明变量

```scss
$hight-color:#fff;
```

任何css的属性值都可以用作scss的变量声明

变量引用：

```scss
$highlight-color: #F90;
.selected {
 border: 1px solid $highlight-color;
}

```

只要符合css的使用标准，变量就可以使用

2中划线和下划线

用中划线声明的变量可以使用下划线的方式引用，是用下划线声明的变量也可以用中划线的方式引用

3普通嵌套、父选择器标识符、群组选择器嵌套、层次选择器>+~嵌套

父级选择器的标识符&：当在使用

```scss
article a {
  color: blue;
  &:hover { color: red }
}

```

当在使用IE浏览器时，可以通过JavaScript在标签上添加一个ie的类名

```scss
#content aside {
  color: red;
  body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

```

群组选择器

无需在每一个选择器前重复容器元素的选择器，当scss解开一个群组选择器内嵌规则时，他会把每一个内嵌选择器的规则都解出来。

首先`sass`将`nav`和`a``aside`和`a`分别组合，然后将二者重新组合成一个群组选择器

```scss
nav, aside {
  a {color: blue}
}
```

```css
nav a, aside a {color: blue}
```

子代选择器>  选择一个元素的直接子元素

相邻组合选择器+  选择同辈紧跟着的元素

全体组合选择器~  选择全部跟在article后面的同层article元素，不管隔了多少元素

```scss
article ~ article { border-top: 1px dashed #ccc }
```

嵌套属性：

把属性名从中划线—的地方分开，在跟属性后面加冒号，紧跟着加一个{}，把子属性部分写在这个{}块中

默认变量：

使用$建立一个变量，可以加!default去设定默认，如果后面在次声明该变量，则该变量被覆盖

嵌套导入

@import "文件名"

使用@import命令写在css规则中，在这种导入方式下，生成的css文件，局部文件会被直接插到css规则内导入他的地方

注释：

使用//注释只在scss中注释内容，注释的内容不会在css中实现。使用/**/注释的内容会在css文件中显现。

    混合器
        通过 @include （属性）来使用
    css规则
        混合器不仅可以包含属性，还可以包含css规则
    混合器传参
         @mixin 名(形参，形参，形参)
        @include 名(实参，实参，实参) 
    
    默认参数值
          可以是其他参数的引用
    选择器继承  @extend 应该选择器继承另一个选择器里面的样式
           把共有的属性抽离出来放入到一个选择器中，如何让其余的有需要这个样式的选择器去继承这个共有的选择器
           两个，甚至多个选择器有共有的属性，选择器单独的属性是属于选择器
    高级用法：继承html元素样式
    不要使用后代选择器（.aa  .bb 空格）去继承css规则

    Sass 数据类型
            数字      例如:1，2，3，10px
            字符串   包括有引号字符串无引号字符串，例如:  "foo",'bar',are
            颜色         blue...
            布尔值   true false
            空值      null
            数组list   用逗号空格作为分隔符
            maps   相当于JavaScript的object  例如（key1：value1）
        +-*/%
             有三种情况，他是作为除法算术运算符
        值在变量中使用
        （）中
        在算术表达式中
              在变量中，我们不想让他作为算术运算符 { }包裹在变量中
        #{ } 插值语句

        颜色值包含alpha通道 （rgb,rgba）
        opacify 或 transparentize
        IE滤镜要求所有的颜色值包含alpha层，格式必须固定#AABBCCDD
        
        插值修饰属性，修饰选择器