SCSS的特点

• 2019 年 10 月 31 日
• 筆記

SCSS是一种CSS预处理语言

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

CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS

scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，

是一种SCSS-like语言，弥补了sass和css之间的鸿沟；

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

有哪些特点：

1、@import命令导入外部sass、scss、css文件

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

2、继承

继承 .class 使用 @extend

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

3、SCSS占位符 %

使用% 声明的代码块，如果不被@extend调用的话就不会被编译。

编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。

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

4、重复代码块，使用混合@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);  }

参考：https://segmentfault.com/a/1190000004688781