CSS外挂：Sass 之规则(Rules)和指令(Directives)

前戏：下面这些玩意还是比较实用的，好像是进阶Sass必备的，以后写起 CSS 要溜得飞起啊！

规则(Rules)

1. @import

Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

@import 根据文件名引入。默认情况下，它会寻找 Sass 文件并直接引入，但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：

如果文件的扩展名是 .css。
如果文件名以 http:// 开头。
如果文件名是 url()。
@import 包含了任何媒体查询（media queries）

1.1 `@import` 几种用法

@import "icon.scss"; //带.scss,.sass扩展名

@import "icon"; //不带扩展名，Sass会自动寻找带有 .scss或 .sass 扩展名的同名文件并将其引入。

如果你有个 scss 文件需要引入，但你又不希望它被编译成 CSS 文件，这时，你就可以在文件名前面加个_下划线，就能避免被编译。这将告诉 Sass 不要把它编译成 CSS 文件。然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线进行引用。

@import "_icons", "mixin"; //引入多个文件；

要注意的一点： 在同一个目录不能同时存在带下划线和不带下划线的同名文件。例如， _icons.scss 不能与 icons.scss 并存。

2. @media

Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。

SCSS：

.box{
    font-size: 18px;
    @media screen and (max-width: 768px) and (min-width: 320px){
        width: 300px;
    }
    @media screen and (max-width:1024px) and (min-width: 768px){
        width: 600px;
    }
}

编译为：

.box {
  font-size: 18px;
}
@media screen and (max-width: 768px) and (min-width: 320px) {
  .box {
    width: 300px;
  }
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .box {
    width: 600px;
  }
}

3. @extend

SCSS：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译为：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

4. @at-root

主要解决编译出来的 css 选择器嵌套过于严重问题；

SCSS：

.view{
    %public{ //使用了%placeholder，只有使用了@extend调用，才会生成代码；
        content: '';
        display: block;
    }
    background-color: #e0e0e0;
    .view-head{
        &:after{
            @extend %public;
            border-bottom: 1px solid #e0e0e0;
        }
        @at-root .view-head-before{ //.view-head-before会被单独提到一行;
            float: left;
        }
        @at-root .view-head-after{ //.view-head-after会被单独提到一行;
            float: right;
        }
    }
    .view-footer{
        &:before{
            @extend %public;
        }
        color: #f00;
    }
}

编译为：

.view { background-color: #e0e0e0; }
.view .view-head:after,
.view .view-footer:before { content: ''; display: block; }
.view .view-head:after { border-bottom: 1px solid #e0e0e0; }
.view-head-before { float: left; }
.view-head-after { float: right; }
.view .view-footer { color: #f00; }

5. @debug, @warn, @error

@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug；

@warn and @debug功能类似，在这不举栗子了，浪费高度。

SCSS：

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}
.block {
  @include blockOrHidden; //默认是true；
}
.hidden{
  @include blockOrHidden(false);
}

命令行输出：

3 DEBUG: $boolean is true.
7 DEBUG: $boolean is false.

指令(Directives)

1. @if @else

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。下面直接看栗子：

1.1 控制伪元素的content值

SCSS：

@mixin elseif($selector, $value){
    #{$selector}{
        $text: $value;        
        @if $text == google {
            content: '#{$text}';
            @debug "$text is #{$text}"; //在命令行会显示：DEBUG: $text is google.
        }@else if $text == facebook{
            content: '#{$text}';
            @debug "$text is #{$text}";
        }@else if $text == wechat{
            content: '#{$text}';
            @debug "$text is #{$text}";
        }@else if $text == twitter{
            content: '#{$text}';
            @debug "$text is #{$text}";
        }
    }
}
@include elseif('div:before','google');
//（别嫌SCSS写得这么多，而最后输出就一行代码）
// 在实际项目中玩起来是很愉快的！

编译输出：

.box:before { content: "google"; }

1.2 控制元素显示隐藏的栗子

SCSS：

@mixin showOrhide($Boolean: true){
    @if $Boolean{
        display: block;
    }@else{
        display: none;
    }
}
.db{ @include showOrhide(); } //默认true;
.dn{ @include showOrhide(false); }

编译输出：

.db { display: block; }
.dn { display: none; }

2. @for 两种用法

$i => 变量，s => 起始值，e => 结束值；

2.1 @for $i from [s] through [e]

SCSS：

@for $i from 1 through 2{ //through循环出来的值包括end值
    .box-#{$i}{
        width: 20px * $i;
    }
}

编译为：

.box-1 { width: 20px; }
.box-2 { width: 40px; }

2.2 @for $i from [s] to [e]

SCSS：

@for $i from 1 to 2{ //to循环出来的值不包括end值
    .icon-#{$i}{
        font-size: 16px * $i;
    }
}

编译为：

.icon-1 { font-size: 16px; }

2.3 和Interpolation#{}一起玩

SCSS：

$bgc: blue, green, red, yellow;
@for $i from 1 to length($bgc){
    .bgc-#{nth($bgc, $i)}{
        background-color: #{nth($bgc, $i)};
    }
}
//上面说过to循环不包括end值，所以编译后只有3个class;

编译为：

.bgc-blue {
  background-color: blue;
}
.bgc-green {
  background-color: green;
}
.bgc-red {
  background-color: red;
}

2.4 @for生成个网格

SCSS：

$elem: div;
$grid-width: 60px;
$grid-clear: 20px;
%grid{
    float: left;
    margin:0 $grid-clear/2 0 $grid-clear/2;
    //margin:0 ($grid-clear/2) 0 ($grid-clear/2); //觉得看得有点乱也可以加上括号；
}
@for $i from 1 through 6{ //through
    .#{$elem}-#{$i}{
        @extend %grid;
        width: $grid-width * $i + $grid-clear * ($i - 1);
    }
}

用to编译出来的也是一样的css，主要区别于[e]的取值不同；下面这段代码的[e]值是7，而to方式的结束值是不包括最后一位的，所以to方式生成出来的css也是一样。

@for $i from 1 to 7{ //to
    .#{$elem}-#{$i}{
        @extend %grid;
        width: $grid-width * $i + $grid-clear * ($i - 1);
    }
}

编译为：

.div-1, .div-2, .div-3, .div-4, .div-5, .div-6 { float: left;  margin: 0 10px 0 10px; }
.div-1 { width: 60px; }
.div-2 { width: 140px; }
.div-3 { width: 220px; }
.div-4 { width: 300px; }
.div-5 { width: 380px; }
.div-6 { width: 460px; }

3. @while

@while 指令也需要 SassScript 表达式，并会生成不同的样式块，直到表达式值为 false 时停止循环。这和 @for 指令非常相似，只要 @while 后面的条件为 true 就会执行。

SCSS：

$s: 12;
@while $s > 0{
    .fs-#{$s + 12}{
        font-size: $s + 12px;
    }
    $s: $s - 2;
}

被编译为：

.fs-24 { font-size: 24px; }
.fs-22 { font-size: 22px; }
.fs-20 { font-size: 20px; }
.fs-18 { font-size: 18px; }
.fs-16 { font-size: 16px; }
.fs-14 { font-size: 14px; }

4. @each

@each 循环指令的形式 @each $var in <list>，$var 是个变量名，<list> 是一个 SassScript 表达式，他将返回一个列表值。

SCSS：

$list: checked, user, login, note, down, more;
@mixin icon-list{
    @each $i in $list{
        .icon-#{$i}{
            background-image: url('../images/#{$i}.png');
        }
    }
}
.icon{
    background-repeat: no-repeat;
    @include icon-list;
}

被编译为：

.icon { background-repeat: no-repeat; }
.icon .icon-checked { background-image: url("../images/checked.png"); }
.icon .icon-user { background-image: url("../images/user.png"); }
.icon .icon-login { background-image: url("../images/login.png"); }
.icon .icon-note { background-image: url("../images/note.png"); }
.icon .icon-down { background-image: url("../images/down.png"); }
.icon .icon-more { background-image: url("../images/more.png"); }

Reference API

SASS_REFERENCE — Sass Documentation #Directives

学完了回过头来整理也真是麻烦，算是总结吧。

CSS外挂：Sass 之规则(Rules)和指令(Directives)

规则(Rules)

1. @import

1.1 `@import` 几种用法

2. @media

3. @extend

4. @at-root

5. @debug, @warn, @error

指令(Directives)

1. @if @else

1.1 控制伪元素的content值

1.2 控制元素显示隐藏的栗子

2. @for 两种用法

2.1 @for $i from [s] through [e]

2.2 @for $i from [s] to [e]

2.3 和Interpolation#{}一起玩

2.4 @for生成个网格

3. @while

4. @each

Reference API

电波马达

引用和评论

Webpack4 不深不浅的实践教程

CSS团队协作规范

前端开发工具

CSS 如何模拟“真实的”进度条？

纯CSS实现有趣emoji切换开关

那些年我用过的SAP IDE

一文搞定前端多种主题配置及全局引入scss文件

CSS外挂：Sass 之规则(Rules)和指令(Directives)

规则(Rules)

1. @import

1.1 @import 几种用法

2. @media

3. @extend

4. @at-root

5. @debug, @warn, @error

指令(Directives)

1. @if @else

1.1 控制伪元素的content值

1.2 控制元素显示隐藏的栗子

2. @for 两种用法

2.1 @for $i from [s] through [e]

2.2 @for $i from [s] to [e]

2.3 和Interpolation#{}一起玩

2.4 @for生成个网格

3. @while

4. @each

Reference API

电波马达

引用和评论

Webpack4 不深不浅的实践教程

CSS团队协作规范

前端开发工具

CSS 如何模拟“真实的”进度条？

纯CSS实现有趣emoji切换开关

那些年我用过的SAP IDE

一文搞定前端多种主题配置及全局引入scss文件

1.1 `@import` 几种用法