scss知识点总结

参照：https://blog.csdn.net/pedrojuliet/article/details/72887490

1、什么是SCSS

​ Sass是成熟、稳定、强大的css预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时，也继承了Sass强大的动态功能

2、Scss和Sass区别

Scss是Sass的一个升级版本，安全兼容Sass之前的功能，又有些新增的能力

• 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名
• 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号，而 Scss 用大括号{}取代了原来的缩进。

3、特色功能

• 完全兼容CSS3
• 在CSS基础上增加变量、嵌套、混合、导入等功能
• 通过函数进行颜色值与属性值的运算
• 提供控制指令等高级功能
• 自定义输出格式

4、支持的6种数据类型：数字、字符串、颜色、布尔、空值nul、数组(用空格或逗号做分隔符)、maps(相当于JavaScript的object)

---

5、Sass、Less和stylus区别

相同点：均具有变量、混合、嵌套、继承、颜色混合五大基本特性

不同点：

(1) 变量名

• Sass变量必须以$开头，变量名和值之间使用冒号隔开

$maincolor : #092873;
$siteWidth : 1024px;
$borderStyle : dotted;
body {
  color: $maincolor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

• Less 变量都是用@开头的，变量名和值之间使用冒号隔开

  @maincolor : #092873;
  @siteWidth : 1024px;
  @borderStyle : dotted;
  

• stylus对变量是没有任何设定，可以是$开头，或者任何符号，但是stylus中不能用@开头

  maincolor = #092873
  siteWidth = 1024px
  borderStyle = dotted
  

（2）继承

• sass可以通过@extend来实现代码组合声明

  .message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
  }
  .success {
    @extend .message;
    border-color: green;
  }
  

• Less写法更像混入写法

  .message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
  }
  .success {
    .message;
    border-color: green;
  }
  

最终呈现的css样式

.message, .success{
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}

（3）混合器

• Sass

  @mixin error($borderWidth:2px) {
    border: $borderWidth solid #F00;
    color: #F00;
  }
  .ge-error {
    padding: 20px;
    margin: 4px;
    @ include error(); //这里调用默认 border: 2px solid #F00;
  }
  .log-error {
    left: 12px;
    position: absolute;
    top: 20px;
    @ include error(5px); //这里调用 border:5px solid #F00;
  }
  

• Less的混入写法

  .error(@borderWidth:2px) {
    border: @borderWidth solid #F00;
    color: #F00;
  }
  .ge-error {
    padding: 20px;
    margin: 4px;
    .error(2px);
  }
  

• Stylus的混入写法

  error(borderWidth= 2px) {
    border: borderWidth solid #F00;
    color: #F00;
  }
  .ge-error {
    padding: 20px;
    margin: 4px;
    error(); 
  }
  

提问：

1、变量名命名的时候以什么开头

​ 以美元符号($)开头

2、伪类的嵌套，需要添加什么当做占位符，不然会生成空格

​ &符号当做占位符

3、使用下划线开头的scss文件和不使用下划线开头的scss文件有什么区别

​ 下划线开头的scss文件是局部scss文件，不使用下划线开头的scss文件是全局scss文件，局部文件不会转换成对应的css文件