VUE中使用SCSS ，SCSS的使用

什么是scss？什么是css预处理器？sass和scss的区别。

scss是一种css预处理语言。

定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。

常见的css预处理语言有SCSS (SASS) 和LESS、POSTCSS

那么SCSS和SASS 有什么区别呢

· 文件扩展名不同，文件后缀分别是“.scss”和“.sass”

· sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；sass的安装和使用不细说了；

· scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的差距

vue项目上安装SCSS和使用

① 使用vue-cli模板创建新项目：vue init webpack myvue

② 安装sass 依赖包 ，在cmd界面输入：

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

③ 在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
test: / \.scss$ / ,
loaders: [ 'style' , 'css' , 'sass' ]
}

④ 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错

CSS 的使用语法

1. 注释

   1.//注释内容
   
   
   2./*注释内容*/
   
   
   3./*!注释内容*/
   

   1.//注释内容

   在Sass中，这种注释方式在编译后不会保留下来。

   2./*注释内容*/

   在Sass中，这种注释方式在编译之后会保留下来。因为这种注释方式跟CSS注释方式是相同的，所以编译后会保留下来。

   3./*!注释内容*/

   我们都知道压缩工具会删除所有的注释，有些时候为了保留一些版权声明的注释说明，可以采用这个方式注释声明。

2. 导入外部文件

   < style lang = "scss" >
   @import './test.scss' ; //导入外部scss文件
   .myText {
      border : 1px solid red ;
   }
   </ style >

3. 变量
   1. 全局变量

      $height : 200px ; //全局变量声明不在大花括号内
      $bgcolor : blue ;
      body {
         .father01 {  //嵌套
            width : $width ;
            height : $height ;
            $border : 1px solid red ; //局部变量是声明在元素内的
            border : $border ;
            $bgcolor : purple ; //全局变量和局部变量名一致时，调用局部变量进行覆盖
            background-color : $bgcolor ;
         }
      }

      全局变量是声明在元素大括号外面的变量，局部变量会覆盖全局变量

   2. 局部变量

      body {
         .father01 {
            width : 200px ;
            height : 200px ;
            $border : 1px solid red !global; //使用global关键词将$border变为了全局变量
            border : $border ;
         }
         .father02 {
            width : 300px ;
            height : 300px ;
            border : $border ; //使用全局变量
         }
      }

      局部变量是声明在元素内的变量，后面添加!global 会提升为全局变量

   3. 默认变量

      $color : red !default ; //声明默认变量 $color
      $color : purple ; //根据需求覆盖默认变量
      .father01 {
         color : $color ;
      }

4. 变量嵌套引用  即字符串插值，需要使用 #{} 来进行包裹

   $left : left ;
   .father02 {
      width : 300px ;
      height : 300px ;
      border : $border ; //使用全局变量
   border- #{$left} : 2px solid purple ; //使用字符串插值之前必须先声明
   }

5. 嵌套
   1. 除了选择器嵌套外，还可以使用&来引用父元素

      .container {
         & > p {   //可以编译成CSS的 .container>p {} 效果
            color : purple ;
         }
      }

6. 继承

   .container {
      color : purple ;
      border : 2px dashed purple ;
   }
   .myText {
      @extend .container; //这里将继承.container类的所有样式
      font-size : 22px ;
   }

7. 占位符 

   %m5 { background-color : lightblue ;}
   .P1 { @extend %m5 ; }
   

   使用% 声明的代码块，如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。
8. 混入   使用混合@mixin命令定义，以及使用@include调用该mixin

   @mixin normalStyle {
      //使用@mixin命令定义可重复使用的代码块
      width : 300px ;
      height : 100px ;
      color : black ;
      background-color : lightblue ;
   }
   .container {
      @include normalStyle ;
      //使用@include 命令引用@mixin定义的代码块
   }

   在使用@mixin和@include时，还可以传入参数和默认值

   @mixin normalStyle ( $width , $height , $color , $defaultValue : orange ) {
      width : $width ;
      height : $height ;
      color : $color ;
      background-color : $defaultValue ;
   }
   .container {
      @include normalStyle ( 300px , 100px , green , lightgray );
   }

9. 条件语句

   .container {
      p {
         @if 1 + 1 < 3 {
            border : 1px solid blue ;
         } @else {
            border : 1 ps dashed palevioletred ;
         }
      }
   }

10. 函数

    @function double ( $sn ){ //SCSS允许自定义函数
       @return $sn * 2 ;
    }
    .myText {
       border : 1px solid red ;
       width : double ( 200px ); //使用在SCSS中自定义的函数
    }

11. 循环

        1.for循环

                在sass中的@for循环有两种方式：

                ①@for $i from <start> through <end>

                ②@for $i from <start> to <end>

                其中$i表示变量，start表示开始值，end表示结束值；

                through表示包括end这个数值；to表示不包括end这个数值；

        2.while循环

                只要@while后面的条件为true就会执行，直到表达式值为false时停止循环；

        3.each  in循环

                就是去遍历一个列表，从列表中取出对应值；他的指令形式为：@each $var in <list>

/for 循环
@for $i from 1 to 5 {
   .item- #{$i} {
      border : #{$i} px solid ;
   }
}
//while 循环
$m : 8 ;
@while $m > 0 {
   .items- #{$m} {
      width : 2em * $m ;
   }
   $m : $m - 2 ;
}
//这里可以对$m进行运算 让它每次都减去2
//each 语法
@each $item in class01 , class02 { //$item就是遍历了in关键词后面的类名列
   . #{$item} {
      background-color : purple ;
   }
}
//会编译成 .class01 , .class02 {background-color:purple;}