1.什么是Sass

Sass是一种基于CSS的预处理语言，在Css的基础上将代码抽象化简单化，实现了更多的功能扩展，比如定义变量，嵌套，条件判断等，主要目的就是为了减少CSS代码的重复性和代码冗余，使维护更加方便，可读性更强。

Sass分两种语法：一种是Scss，一种是Sass。Sass是老语法，也称缩进语法，他不是使用大括号和分号，而是使用缩进，文件使用扩展名.sass

h1
  color:#000
  background:#fff

最新语法为Scss，增强了对css3语法的支持，可以完全兼容css3，扩展名为.scss

下面为大家介绍一些编程中常用的Scss语法。

2.变量

// 全局变量
// 可以放在一个独立的文件
$main-set-ff: Arial;
.box: {
  font-family:$main-set-ff
 };
// 局部变量
.box {
  $width: 666px;
  width: $width;
}

3.引入文件

// 使用scss的@import规则不需要指明被导入文件的全名。
// 你可以省略.sass或.scss文件后缀
@import 'varibles'

注意：scss中的@import跟css中原生的@import不是一个东西。

css的@import规则，允许在一个css文件中导入其他css文件。但是只有执行到@import时，浏览器才会去下载其css文件，造成渲染阻塞，对性能不利。

scss的@import规则，是在生成css文件时就把相关文件导入进来，所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

另外Scss的@import可以放在样式表任意位置，而css中的@import只能放在代码最前面

4.嵌套

嵌套最好不要超过四层，否则会影响性能

// 选择器嵌套
.main-set{
  font-size:12px;
  .head-line{
    color:#333;
   }
 }
 // 属性嵌套
 .head-line{
   font:{
     family:Arial;
     size:16px;
   }
 }
 // 伪类嵌套(&)
 .head-title{
   color:#333;
   &:hover{
    background-color:#eee;
   }
}

5.继承@extend

.error {
  color:#f00;
 }
.serious-error {
  @extend .color;
  border:1px solid #f00;
 }
 // 编译成css如下,serious-error也拥有了error的样式
 .error,.serious-error {
   color:#f00;
 }
 .serious-error{
   border:1px solid #f00
  }

占位继承：不是为了给某个元素使用，仅仅给@extend使用。前面添加%，占位继承的选择器不会显示在编译后的css中

%div0{
  width:100px;
 }
.div1{
  @extend %div0;
 }
 // 编译后
 .div1{
   width:100px;
 }

注意：@extend不可以继承选择器序列

6.混合@mixin

@mixin col-6{
  width:50%;
  float:left
 }
.demo-sec{
  @include col-6() 
 }
 // 也可以带参数,指定默认值
 @mixin col($width:50%,$color:#f00){
   width:$width;
   color:$color;
 }
 .demo{
   @include col(40%,#333);
 }

7.@debug、@warm、@error

用来调试的，当编译出错时输出你设置的提示信息

8.@media

sass中的@media可以内嵌在css规则中，在生成css的时候，@media会被提到样式的最高层级

@mixin col-sm($width:50%){
  @media (min-width:768px){
    width:$width;
    float:left;
  }
}
.webdemo-sec{
  @include col-sm()
}
// 编译成css
@media (min-width:768px){
  .webdemo-sec{
    width:50%;
    float:left;
  }
}

9.@at-root

浏览器在解析css选择器的时候是从右往左的顺序解析的，嵌套多层会导致样式渲染低效。使用@at-root指令，能够使嵌套的内容跳出根元素。这样既能保证嵌套结构，看起来清晰，又能提高渲染性能。

.main-set{
  font-size:12px;
  @at-root{
   .main-set-headline{
     color:#f00;
   }
}
// 编译后
.main-set{
  font-size:12px;
}
.main-set-headline{
  color:#f00;
}

10.条件判断@if @else

@mixin col-sm($width:50%){

  @if type-of($width)!==number{
    @error "$width必须是一个数值类型!,当前输入为#{$width}";
  }
  
  @if not unitless($width){ //not取反
   // 有单位
    @if unit($width)!=="%" {
      @error "$width应该是一个百分值!,当前输入为#{$width}";
    }
  }@else {
    // 无单位
    @warn "$width应该是一个百分值!,当前输入为#{$width}"
    $width:(percentage($width/100))
  }
}

11.基本运算（加减乘除）

1.加法、减法

数值可以带单位，但是需要运算单位相同，如果不相同就会报错，编译不通过

$sidebar-width:220px;
$content-width:720px;
.container {
  width: ($sidebar-width + $content-width)
  margin: 0 auto;
}
// 编译出来的css代码是：
.container {
   width:940px;
   margin:0 auto;
}

注意：如果做减法运算是“变量”而不是“数值”的时候，要注意减号“-”前后一定要有空格。

2.乘法

做乘法运算时，只能有一个数值带单位，另外一个数值只能是不带单位的数字。如果两个都是带单位的数字，则Sass会报错而编译不通过。

3.除法

“/”在CSS中已经作为一种符号来使用了，例如字体属性缩写“font:Arial 12px/1.5em”。因此在Sass中做除法运算的时候，如果我们直接使用“/”符号作为除号，将不会生效，所以除法运算需要在外面添加一个“()”。如width:（$width/2)

如果做除法运算中是“变量”而不是“数值”时，“/”会被自动识别为除法，不需要在外面添加小括号。

注意：在实际开发中，不管是加减，还是乘除，建议在外面加上小括号。这种书写方式，能够使得代码一目了然，也方便维护。

11.注释

// 单行注释:编译后不显示
/* 多行注释:编译后显示，压缩不显示 */
/*!强制注释:编译后显示，压缩后也显示*/

12.设置字符编码，支持中文注释

@charset "UTF-8";

常用Sass语法