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; // 定义命名空间common

div {
    @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等