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命令，调用这个mixindiv{@includecenter;}//mixin的强大之处，在于可以指定参数和缺省值。@mixincolor($color:black){color:$color;border:1px solid$value;}//使用的时候，根据需要加入参数：div{@includecolor(red);}

高级用法

@if    或者  @if @else

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

链接：https://www.jianshu.com/p/e2ed8227eda4