SASS的@规则

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等