1. sass的安装、使用、语法

1.1 安装 npm i sass

1.2 使用

    单独文件的后缀  .scss

   写在 .vue文件中  <style lang="scss"></style>

1.3 语法

   1.3.1 定义变量：用来定义主题色、字体颜色、字体大小、部分公共样式，以$开头

　　例：定义：$blue:#1875e7; 使用：color:$blue;

             如果需要把变量镶嵌到字符串中，需要用  #{变量}

　1.3.2 计算功能

       height:calc(100vh-20rem);

　　width:(100px/2);

       line-height:10px+20px

　1.3.3 嵌套   例：列表信息已读未读小红点提示

       <li  :class="item.isRead?'':'red'">1 </li>

       .red{

　　　　&:before{                            //属性嵌套，&符号可以引用父元素    &:hover

　　　　　　content:'';

　　　　　　position:absolute;

 　　　　　　left:10px;

　　　　　　top:45%;

　　　　　　width:6px;

　　　　　　height:6px;

　　　　　　border-radius:50%;

　　　　　　background:red;

　　　　}　　

　　}

　　1.3.4 代码注释

          1.  /*   */ 会保留到编译后的文件中

          　　 /*  头部样式开始   */

　　　　　　。。。。

         　　 /*  头部样式结束   */

　　　2. //  只会保留在sass源文件中，编译后被忽略

 　　　　// color:red

　　　3. /* !       */     表示重点注释

1.3.5 代码的重用

    1.允许一个选择器继承另一个选择器  @extend

       .class1{

　　　　border:1px solid #ddd;

        }

      .class2{

　　　　@extend .class1;

　　　　font-size:14px;

       }

1.3.6 可以重用的代码块   @mixin   定义一个代码块     @include  使用

　　1. 定义    @mixin    left{ float:left;margin-left:10px; }

　　2.使用     .class1{

　　　　　　　　@include left;

  　　　　　　}

　　　mixin 强大之处，可以指定参数和缺省值  像函数传参一样

                  @mixin    left($value){

　　　　　　　　　　　　float:left;margin-left:$value;

　　　　　　　　　　}

  　　　　.class1{

　　　　　　　　@include left(10px);

  　　　　　　}

　　1.3.7 语句 

　　　　例：循环产生不同大小的圆⚪

　　　　　　$bubbleSize:20,30,40,50;

　　　　　　@each $size in $bubbleSize{

　　　　　　　　.b#{$size}{

　　　　　　　　　　width:$size+px;

　　　　　　　　　　height:$size+px;

　　　　　　　　　　border-radius:50%;

　　　　　　　　}

　　　　　　}

　　//  得到类名 .b20,  .b30,  .b40, .b50    就可以直接使用  < div class="b20"></div>