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; }
　　}

还有一些循环方法…