1，@import
sass扩展了import导入，对于css，@import导入在页面加载的时候去下载导入的外部文件，而sass的导入，在编译成css文件的时候就将外部的sass文件导入合并编译成一个css文件。
他支持同时导入多个文件；支持在嵌套样式中导入文件。
// 顶部导入文件
<style lang="scss">@import './common.scss';@import './mixin.scss', './index.scss'; // 导入多个文件
</style>//card.scss文件
div {border-radius: 6px;
}
// 嵌套中导入文件
.card {@import './card.scss';
}// 编译后为
.card div {border-radius: 6px;
}2，@media
sass中的media与css中的作用一样，只是sass中支持在嵌套中使用。
.menu {width: 300px;@media screen and (orientation: landscape) {width: 400px;}
}3，@if、@else if、@else
逻辑控制，与js中的if、else语法用法一致。可以配合sass中的not、and、or等字符使用
$width: 100px;@if $width == 100px {border-color: blue;
} @else {border-color: #F3F3F3;
}@if $height > 2 {margin: 20px;
}4，@for
for循环，用来迭代，限制循环的次数。不同于js的是，索引从1开始。
语法1：@for $i from <start> to <end>（不包含最后end的值）
语法2：@for $i from <start> through <end>（包含最后end的值）
// 循环3次
@for $i from 1 through 3 {.list-#{$1} {width: 10px;}
}// 编译后
.list-1 {width: 10px;
}
.list-2 {width: 10px;
}
.list-3 {width: 10px;
}5，@each
类似于js中的foreach。sass中的each用来遍历list或者map。
语法：@each $var in <list>
$widths: 2px 3px 4px; // 数组@each $item in $widths {.wd-#{$item} {width: $item;}
}// 编译后
.wd-2px {width: 2px;
}
.wd-3px {width: 3px;
}
.wd-4px {width: 4px;
}6，@while
与js的while循环类似。很少使用
$i: 3;@while $i > 1 {.item-#{$i} {height: $i + px;}$i: $i - 1; // 在这里重新赋值
}// 编译后
.item-3 {height: 3px;
}
.item-2 {height: 2px;
}
.item-1 {height: 1px;
}7，@function
函数，与mixin类似，也支持可变参数与默认值。用法与js中基本类似，也支持@return返回值。
语法：@function <name>(<arguments...>)
@function add($param1, $baseNo: 10px) {$result: $param1 + $baseNo;@return $result;
}8，@use
与@important作用一样，导入外部文件，但是@use还有额外的作用，在引入时用as关键字定义定义命名空间，并可以通过命名空间调用外部文件的样式
@use './common.scss' as common; // 定义命名空间commondiv {@include common.scrollbar; // 通过命名空间属性调用外部样式
}9，@at-root
将嵌套中的样式置顶到根部，脱离嵌套的样式层级。
.main {@at-root .header { // 将header选择器置顶height: 40px;}.body {height: 1000px;}
}// 编译后
.header {height: 40px;
}
.main {.body {height: 1000px;}
}10，@debug、@error、@warn
sass中的@debug、@error、@warn用来打印一些信息，分别和js中的console.log()、console.error()、console.warn()类似。
@if $width < 100 {padding-top: 20px;
} @else {@warn '宽度输入过大';
}11，@extend和占位符选择器%
已了解到@extend是用来继承样式的。而占位符选择器placeholder selector是sass提供的新选择器。定义方式与ID选择器、class选择器类似，只是标识符是%。但是他只能通过@extend引用。
他的特点是，如果只定义，但是没引用，是不会编译到css文件中的
// 定义占位符选择器
%eclipse {text-overflow: ellipsis;overflow: hidden;white-space: no-wrap;
}// 引用
.main {@extend %eclipse;
}12，其他规则
还有一些其他常用规则，例如@mixin、@include等
