Sass基础语法

SASS是SCSS3的新语法

SASS允许使用变量，所有变量以$开头。

$red: red;
div {
  color: $red;
}
//也可以镶嵌在字符串里面使用，必须需要写在#{}之中，作用于属性名
$left: left;
margin-#{$left}：30px；

SASS允许在代码中使用算式。

body {　　　　
    margin: (14px/2);　　　　
    top: 50px + 100px;　　　　
    right: $var * 10%;　　
}

SASS允许选择器嵌套

div h1 {　　　　
color : red;　　
}
//也允许属性嵌套（注意属性后面要加上冒号）
border: {
    size: 2px;
    style: solid;
    color: black;
}

注释

SASS共有两种注释风格。

标准的CSS注释 /* comment / ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

SASS允许一个选择器，继承另一个选择器。

.class1 {　　
    border: 1px solid #ddd;
}
//class2要继承class1，就要使用@extend命令：
.class2 {　　　　
    @extend .class1;　　　　
    font-size:120%;　　
}

SASS可以设置可以重用的代码块

@Mixin表示是可以重用的代码块。

@mixin center{
          display: flex;
          justify-content: center;
          align-items: center;
      }
      //使用@center命令，调用这个mixin　
      div {　　　　
          @include center;　　
      }
      //mixin的强大之处，在于可以指定参数和缺省值。
      @mixin color($color: black) {　　　　
          color: $color;　　　　
          border: 1px solid $value;　　
      }
      //使用的时候，根据需要加入参数：
      div {　　　　
          @include color(red);　　
      }

高级用法

@if 或者 @if @else

　p {　　　　
　    @if 1 + 1 == 2 { border: 1px solid; }　　　　
　    @if 5 < 3 { border: 2px dotted; }　　
　}
　//@if @else
  p {　　　　
      @if 1 + 1 == 2 { border: 1px solid solid; }
      @else { border: 10px solid  red; }　　
   }