今天完成的事情：

sass 任务十一、十二使用总结：

1.变量：

由变量声明符、变量名称、变量值组成，例如：$width:300px;

    ·声明变量：普通变量、默认变量  $width:300px;/$width:300px ！default;

注意： sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

    ·变量的调用：$fontSize: 12px;//声明

        body{

                font-size:$fontSize;//调用

               }

    ·全局变量与局部变量：

                全局变量就是定义在元素外面的变量！（在选择器、函数、混合宏…的外面定义的变量为全局变量）；

                局部变量：定义在元素内部的变量，内部的局部变量不会影响外部的其他元素，局部变量只会在局部范围内覆盖全局变 量。在局部变量的属性值后加上!global关键字可以将变量提升为全局变量。

什么时候声明变量？

该值至少重复出现了两次；

该值至少可能会被更新一次；

该值所有的表现都与变量有关（非巧合）。

２.嵌套

嵌套分为3种：选择器嵌套、属性嵌套、伪类嵌套。

     ·选择器嵌套：有很好的结构性，可以依照html布局的结构依层依次写下来，嵌套层数最好不要超过四层

     ·属性嵌套：CSS 有一些属性前缀相同，只是后缀不一样，可以进行嵌套。

      //属性嵌套

        .box {

                border: {

                              top: 1px solid red;

                              bottom: 1px solid green;

                             }

                   }

      · 伪类嵌套：伪类嵌套和属性嵌套非常类似，需要借助&符号一起配合使用。

       .clearfix{

                    &:before,

                    &:after {                             //&代表父元素选择器的名字

                                content:"";

                               display: table;

                               }

                      &:after {

                                   clear:both;

                                      overflow: hidden;

                                     }

                        }

注意：嵌套不是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深。

3.混合器：当样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达目的了。此时混合宏就会变得非常有意义。

       ·声明混合器：不带参数的混合器、含参数的不设置默认值的混合器、含参数的设置默认值的混合器、多个参数的混合器

        注意：使用混合器最大的不足之处是会生成冗余的代码块。Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合器最不足之处。

4.继承：指继承类中的样式代码块。通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。

.btn {

  border: 1px solid #ccc;

  padding: 6px 10px;

  font-size: 14px;

}

.btn-primary {

background-color: #f36;

color: #fff;

@extend .btn;

}

5.占位符

占位符可以改变以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。

6.注释：

Sass中有两种注释方式: 

1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”，会被编译； 

2、类似 JavaScript 的注释方式，使用“//”，不会被编译

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示

7.运算：

加减乘除、变量运算、数字运算、颜色运算、字符运算等。

混合宏、继承、占位符的使用时机：

1.混合宏的使用：

不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码冗余，但它可以传参数，较为灵活。

建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

2.继承的使用：

使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起变为组合选择器。编译后的代码相对于混合宏来说要干净整洁，但是它不能传变量参数。

建议：若代码块不需传任何变量参数，且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

3.占位符的使用：

编译后的 CSS 代码和使用继承基本相同，占位符和继承的主要区别是：

占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；

继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。

其他sass知识基本还没用上，等用到了再来总结。

明天计划的事情：

学习css组件化

遇到的问题：

看了很多文档，有了大概组件话的认识，但是不知道怎么操作

收获：