简介

• CSS预处理器，对CSS语言的扩展

功能

1.变量

• 声明：$height:200px;
  • 在规则块外：都可以调用
  • 在规则块内：只有准则块内调用
• 引用：height:$height
• 分隔：使用下划线或中划线，可以相互转化兼容

2.嵌套

• eg:

	.a {
		b{
		}
	}

• 扩展
  • 父选择器标识符：&
  • 群组选择器的嵌套(群组选择器：同时可以命中多个元素)
  • 同层组合和子组合选择器
    • 子组合:>
    • 同级相邻：+
    • 同级间隔：~
  • 属性嵌套：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。

  	nav {
  	  border: {
  		  style: solid;
  		  width: 1px;
  		  color: #ccc;
  	  }
  	}
  	nav {
  	  border-style: solid;
  	  border-width: 1px;
  	  border-color: #ccc;
  	}
  

3.导入SASS文件

• @import
  • 引入，执行到指定位置，才去下载
  • 引入即导入：不需要额外的下载
• 部分文件
  • 那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件
• 默认变量值：变量后面添加 !default

4.注释

• 行：//
• 块：/**/

5.混合器

• 场景：大段样式的重用
• 定义：@mixin a{}
• 使用：@include a
• 规则：混合器中包含属性和css规则
  6.继承
• 定义：a {}
• 使用：b{ @extend a;}