Sass基础：@-rules规则和指令

@-Rules和指令是Sass中你必须学习和掌握的内容，特别是@import规则。这些@-rules有一部分是CSS @-rules的扩展，还有一些是Sass的特别指令。如果你准备使用Sass，那么这些规则和指令是你必须了解的内容。

@import

Sass扩展了CSS @import规则，可以用它来导入SCSS/Sass文件。通常我们使用这个规则来将Sass文件引入到一个主文件中。然后我们在项目的主CSS文件中包含这个主Sass文件，以合并我们需要的所有规则。我们通过导入的文件可以访问其它文件中的所有mixins和变量。

Sass默认会在当前目录下查找其它Sass文件，然后在到当前目录的子目录中去查找。你也可以使用加载目录选项来指定加载目录。如果你使用Compass，你可以在config.rb中修改sass_dir来指定加载目录。

@import会查找并导入Sass文件，但是会在下列情况下将文件编译为一个CSS @import规则：

• 文件的扩展名是.css
• 文件名以http://开头
• 文件名是一个url()
• @import中有媒体查询

如果文件的扩展名是.sass或.scss，这个文件将被导入。如果要导入的文件没有扩展名，它会尝试查找于这个文件名匹配的sass文件，例如：

@import "sample.scss";
 
@import "sample";                              
                            

上面的两个@import声明都是有效的，并且都会导入sample.scss文件。第二个声明同时也会导入sample.sass文件，如果这个文件存在的话。

我们可以同时导入多个文件，使用逗号来隔开它们。

@import "sample1", "sample2", "sample3";                              
                            

在导入文件的时候，要关注的一个问题是文件的导入顺序。例如，如果我们有一个文件叫myVariables，这个文件中包含了一些我们要使用的变量。此外还有一个叫myStyles的文件，这个文件要使用myVariables文件中的变量，那么myVariables文件必须先被导入。

@import "myVariables";
@import "myStyles";                              
                            

如果将文件导入的顺序对调，那么myStyles文件在查找变量时将发生错误。

合并导入（Partials @import）

当你导入一个SCSS/Sass文件会被编译为相同名称的CSS文件。通常我们希望导入多个SCSS/Sass文件到一个主CSS文件中，于其它CSS文件进行合并。为了达到这个目的，我们需要使用@import将文件作为CSS文件的一部分进行导入。我们可以通过将SCSS/SASS文件修改为前面带一个下划线的形式，这个下划线会告诉Sass不要将这个文件作为单独的CSS文件来进行编译，而是将它和其它包含@import声明的规则进行合并编译。

当我们进行导入的时候文件名不需要写下划线，例如将myVariables修改为_myVariables，导入的时候只需要想下面这样书写。

@import "myVariables";                              
                            

使用上面的方法唯一不同的是不会生成myVariables.css文件，而是将它合并到主CSS文件中。注意，你不能够在同一个目录中同时包含不带下划线和带下划线的相同名称的文件。例如，同一个目录下不能同时存在_myVariables.scss和myVariables.scss文件。

嵌套导入（Nested @import）

有时候我们需要在一些规则中使用@import进行导入，例如，有一个test文件，它的规则如下：

.try {
  color: blue;
}                              
                            

我们可以在主文件中导入这个规则：

#why {
  @import "test";
}                              
                            

编译之后会得到下面的CSS文件：

#why .try {
  color: blue;
}                              
                            

@mixin等指令不能够给进行嵌套，同样，你也不可以在mixins和控制指令中嵌套@import。

@media

@media的作用和CSS @media规则相同，但是它可以嵌套在CSS规则之中。

当@media指令嵌套在CSS规则中的时候，编译后会被放置在顶层的样式表中。例如：

.container {
  width: 60%;
  @media (min-width: 200px) and (max-width:600px) {
    width: 100%;
  }
}                              
                            

编译之后为：

.container {
  width: 60%;
}
@media (min-width: 200px) and (max-width: 600px) {
  .container {
    width: 100%;
  }
}                              
                            

正如上面的代码，虽然@media嵌套在.container中，但是编译之后会得到一条单独的语句。我们还可以在@media会生成两条媒体查询语句。中嵌套@media，编译后会使用and进行合并。

@media screen {
  .main {
    @media (max-width: 600px) {
      width: 100%;
    }
    @media (min-width: 700px) {
      width: 70%;
    }
  }
}                              
                            

编译之后为：

@media screen and (max-width: 600px) {
  .main {
    width: 100%;
  }
}
@media screen and (min-width: 700px) {
  .main {
    width: 70%;
  }
}                              
                            

上面的嵌套@media会生成两条媒体查询语句。

最后，我们可以在@media中使用Sass的变量，函数和操作符等。

$format: screen;
$mobile: 500px;
$tablet: 800px;
$desktop: 1200px;
 
@media #{$format} {
  .menu {
    @media (max-width: $mobile) {
      width: 100%;
    }
    @media (max-width: $tablet) {
      width: 60%;
    }
    @media (max-width: $desktop) {
      width: 30%;
    }
  }
}                             
                            

正如上面所示，代码中使用不同的变量来指定对不同的设备屏幕进行媒体查询。编译后的结果如下:

@media screen and (max-width: 500px) {
  .menu {
    width: 100%;
  }
}
@media screen and (max-width: 800px) {
  .menu {
    width: 60%;
  }
}
@media screen and (max-width: 1200px) {
  .menu {
    width: 30%;
  }
}                              
                            

@extend

在我们渲染一个页面的时候，有些元素会有一些公共样式以及它自己的特殊样式。例如，文本有两个样式，一个是正常样式，一个是加粗样式。

.main {
  color:  black;
  font-size: 12px;
}
.emphasis {
  font-weight: bold;
}                              
                            

如果需要使用加粗字体，我们可以这样写HTML代码：

<div class="main emphasis">                             
                            

我们可以使用Sass来减少一些重复性的代码。@extend指令允许我们使一个元素继承其它元素的样式。

.master {
  color:  black;
  font-size: 12px;
}
.emphasis {
  @extend .master;
  font-weight: bold;
}                              
                            

编译后得到下面的结果：

.master, .emphasis {
  color: black;
  font-size: 12px;
}
 
.emphasis {
  font-weight: bold;
}                              
                            

现在，我们需要使用加粗字体只需啊哟使用.emphasis class即可。

通过@extend指令，我们可以继承复杂的选择器，实现多重继承，链式继承等等。如果想更深入的了解这方面的知识，可以查看Sass documentation。

@at-root

@at-root指令会在文档的根元素下创建规则，而不是嵌套在它的父元素中。

.top {
  .first {
    font-size: 12px;
  }
  @at-root {
    .second {
      font-size: 14px;
    }
    .third {
      font-size: 16px;
    }
  }
  .fourth {
    font-size: 18px;
  }
}                              
                            

上面的代码编译后得到：

.top .first {
  font-size: 12px;
}
.second {
  font-size: 14px;
}
.third {
  font-size: 16px;
}
.top .fourth {
  font-size: 18px;
}                              
                            

如上面所示，在@at-root中的选择器会在编译后放到文档的根元素中，而其它的选择器会嵌套在.top选择器中。

@at-root指令还允许我们将选择器移到指令之外，通过使用(without:...)或(with:...)，例如：

@media print {
  .copy {
    color: black;
    @at-root (without: media) {
      width: 100%;
    }
  }
}                              
                            

编译之后得到：

@media print {
  .copy {
    color: black;
  }
}
.copy {
  width: 100%;
}                              
                            

@debug

@debug指令会将Sass表达式的值作为标准错误流进行输出。例如：

@debug 10px + 20px;                              
                            

在控制台上我们可以看到下面的结果：

1 DEBUG: 30px                              
                            

@warn

@warn指令会将Sass表达式的值作为标准错误流进行输出。例如：

$wrn: 20px;
@warn "#{$wrn}";                              
                            

上面的代码会显示表达式的值和警告的行号。

@error

@error指令会将Sass表达式的值作为标准错误流进行输出。例如：

$test: 1px;
@error "#{$test}";                              
                            

上面的代码会显示错误信息，行号和输出值。

小结

本文介绍了Sass的一些基本@-Rules和指令。学习这些规则和指令是学习Sass的基础，希望大家能认真领会。