Sass中文文档

@规则和指令

Sass 支持所有CSS3的 @规则，以及一些已知的其他特定的Sass “指令”。这些在 Sass 都有对应的效果，更多资料请查看控制指令 (control directives) 和混入指令 (mixin directives) 。

@import

Sass 扩展了 CSS @import规则，允许其导入 SCSS 或 Sass 文件。被导入的全部SCSS 或 Sass文件将一起合并到同一个 CSS 文件中。此外，被导入文件中所定义的任何变量或混入（mixins）都可以在主文件（愚人码头注：主文件值的是导入其他文件的文件，即，A文件中导入了B文件，这里的主文件指的就是A文件）中使用。

Sass 会在当前目录和 Rack, Rails, Merb目录下查找其他 Sass 文件。附加搜索目录可以使用:load_paths选项或命令行中的–load-path选项指定。

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

@import 需要一个文件名来导入。默认情况下，它会寻找一个 Sass 文件直接导入，但在以下情况下，仅作为普通的 CSS @import 规则语句，不会导入任何 Sass 文件。

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

如果没有上述条件得到满足并且扩展名是.scss 或.sass，那么 Sass 或 SCSS 文件将被导入。如果没有指定扩展名，Sass 将尝试找到以.scss 或.sass为扩展名的该名称文件并导入。

例如,

@import "foo.scss";

或

@import "foo";

这两行代码都能导入文件foo.scss，而

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

将全部编译为

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

Sass 支持在一个 @import 规则中同时导入多个文件。例如：

@import "rounded-corners", "text-shadow";

将同时导入rounded-corners和text-shadow 这两个文件。

导入规则中可能含有#{} 插值，但存在一定的限制。不能通过变量动态导入Sass文件；#{}插值仅适用于CSS导入规则。因此，它仅适用于url() 导入。

例如：

$family: unquote("Droid+Sans");
    @import url("http://fonts.googleapis.com/css?family=#{$family}");

将编译为

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

Partials

如果你有一个 SCSS 或 Sass 文件要导入，但不希望将其编译到一个CSS文件，你可以在文件名的开头添加一个下划线。这将告诉Sass不要将其编译到一个正常的CSS文件。然后，在导入语句中却不需要添加下划线。

例如，你可能有一个命名为 _colors.scss 的文件，但是不会编译成 _colors.css 文件。你可以这么做

@import "colors";

这样， _colors.scss 将被导入。

注意，请不要将带下划线与不带下划线的同名文件放置在同一个目录下，比如，_colors.scss 和 colors.scss 不能同时存在于同一个目录下。否则带下划线的文件将会被忽略。

嵌套 @import（Nested @import ）

虽然在大部分情况下，一般都是在文档的顶层使用 @import，但是也可以在CSS 规则和@media 规则中包含@import语句。就像一个基层的 @import ，这里会包含 @import 导入文件的内容。但是，这样导入的规则只能嵌套在原先防止 @import 的地方。

举个例子，如果 example.scss 包含

.example {
  color: red;
}

然后导入到 #main 样式内

#main {
  @import "example";
}

将会被编译为

#main .example {
  color: red;
}

该指令只允许出现在文档顶层，像@mixin 或者 @charset，在文件中，不允许被@import导入到一个嵌套上下文中。

不允许在混人 (mixin) 或控制指令 (control directives) 中嵌套 @import。

@media

Sass 中 @media 指令的行为和纯 CSS 中一样，只是增加了一点额外的功能：它们可以嵌套在CSS规则。如果一个@media 指令出现在CSS规则中，它将被冒泡到样式表的顶层，并且包含规则内所有的选择器。这使得很容易地添加特定media样式，而不需要重复使用选择器，或打乱样式表书写流。例如：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译为：

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media的查询（queries）也可以相互嵌套。这些查询（queries）在编译时，将会使用 and 操作符号结合。例如：

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

编译为：

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

@media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值：

最后，@media 查询（queries）可以包含 SassScript 表达式（包括变量 variables，函数 functions 和操作符operators）代替特征名称和特征值。

$media: screen;
    $feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

编译为：

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend

设计一个页面时常常遇到这种情况：当一个样式类（class）含有另一个类的所有样式，并且它自己的特定样式。处理这种最常见的方法是在HTML同时使用一个通用样式类和特殊样式类。例如，假设我们设计需要一个普通错误的样式和一个严重错误的样式。我们可以类似这样写：


  Oh no! You've been hacked!

我们的样式如下

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

不幸的是，这意味着，我们必须时刻记住使用.seriousError的时候需要搭配使用.error。
这对于维护来说是一个负担，甚至导致棘手的错误，并且导致无语意的样式。

@extend 指令避免这些问题，告诉 Sass 一个选择器的样式应该继承另一选择器。例如：

.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;
}

这意味着.error说定义的所有样式也适用于.seriousError，除了.seriousError的特定样式。相当于，每个带有.seriousError类的元素也带有.error类。

其他使用了.error 规则也会同样继承给.seriousError，例如，如果我们有特殊错误样式的hack：

.error.intrusion {
  background-image: url("/image/hacked.png");
}

然后<div class=”seriousError intrusion”>也同样会使用了 hacked.png 背景。

它是如何工作的（How it Works）

@extend通过在样式表中出现被扩展选择器（例如.error）的地方插入扩展选择器（例如.seriousError）。比如上面的例子：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译为：

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

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

当合并选择器时，@extend 会很聪明地避免不必要的重复，所以像.seriousError.seriousError 将转换为 .seriousError，此外，她不会生成不能匹配任何元素的选择器（比如 #main#footer ）。

扩展复杂的选择器（Extending Complex Selectors）

Class 选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器，比如 .special.cool，a:hover 或者 a.user[href^=”http://”] 等，例如：

类（class）选择，并不是唯一可以扩展。她可以扩展任何定义给单个元素的选择器，如.special.cool, a:hover, 或 a.user[href^=”http://”]。例如：

.hoverlink {
  @extend a:hover;
}

同带 class 元素一样，这意味着，a:hover定义的样式同样也适用于.hoverlink。例如：

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

编译为：

a:hover, .hoverlink {
  text-decoration: underline; }

与上面 .error.intrusion 的例子一样， a:hover 中所有的样式将继承给 .hoverlink，甚至包括其他使用到她的样式，例如：

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

编译为：

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

多重扩展 (Multiple Extends)

同一个选择器可以扩展多个选择器。这意味着，它继承了被扩展选择器的所有样式。例如：

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

编译为：

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

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

每个带.seriousError类的元素也有.error类和.attention类。
因此，定义在文档后面的样式优先级高于定义在文档前面的样式：.seriousError的背景颜色是#ff0，而非#fdd，因为 .attention 是在 .error 后面定义。

多重扩展也可以用逗号分隔的选择器列表（list）写入。例如，@extend .error, .attention等同于@extend .error; @extend .attention。

链式扩展（Chaining Extends）

一个选择器可以扩展另一个选择器，另一个选择器又扩展的第三选择器选择。例如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

现在，带 .seriousError 类的每个元素将包含 .error 类，而带 .criticalError 类的每个元素不仅包含 .criticalError类也会同时包含 .error 类，上面的代码编译为：

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

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

选择器序列 (Selector Sequences)

选择器序列，比如.foo .bar 或 .foo + .bar，目前还不能作为扩展。但是，选择器序列本身可以使用@extend。例如：

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

将被编译为：

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

合并选择器序列 (Merging Selector Sequences)

有时，选择器序列扩展另一个选择器，这个选择器出现在另一选择器序列中。在这种情况下，这两个选择器序列需要合并。例如：

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

技术上讲能够生成所有匹配条件的结果，但是这样生成的样式表太复杂了，上面这个简单的例子就可能有 10 种结果。所以，Sass 只会编译输出有用的选择器。

当两个列 (sequence) 合并时，如果没有包含相同的选择器，将生成两个新选择器：第一列出现在第二列之前，或者第二列出现在第一列之前。例如：

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

编译为：

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

如果两个列 (sequence) 包含了相同的选择器，相同部分将会合并在一起，其他部分交替输出。在下面的例子里，两个列都包含 #admin，输出结果中它们合并在了一起：

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}

编译为：

#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; }

@extend-Only 选择器 (@extend-Only Selectors)

有时候你只会想写一个 @extend 扩展样式类，不想直接在你的HTML中使用。在写一个 Sass 样式库时，这是特别有用，如果他们需要，在这里你可以提供 @extend 扩展样式给用户，如果他们不需要，直接被忽视。

对于这种情况，如果使用普通的样式类，在你你最终生成的样式表中，会有很多额外（愚人码头注：无用）的CSS，并且在HTML被使用时，和其他样式类结合的时候容易造成冲突。这就是 Sass 为什么支持”占位选择器”的原因（例如，%foo）。

占位选择器看起来很像普通的 class 和 id 选择器，只是 # 或 . 被替换成了 %。他可以像 class 或者 id 选择器那样使用，而它本身的规则，不会被编译到 CSS 文件中。例如：

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

占位符选择器，就像class和id选择器那样可以用于扩展。扩展选择器，将会编译成CSS，占位符选择器本身不会被编译。例如：

.notice {
  @extend %extreme;
}

编译为：

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

!optional 标记（The !optional Flag）

通常，当你扩展一个选择器的时候，如果说@extend不起作用了，你会收到一个错误提示。
例如，如果没有 .notice 选择器,你这么写a.important {@extend .notice},将会报错。如果只有h1.notice一个选择器包含了.notice，那么也会报错。因为 h1 会与 a 冲突，并且不会生成新的选择器。

然而，有时候，要想@extend不生成任何新的选择器。只是在选择器后添加 !optional标志就可以了。例如：

a.important {
  @extend .notice !optional;
}

指令中的@extend (@extend in Directives)

在指令中使用 @extend 时（比如在@media 中）存在一些限制：Sass 不可以将 @media 层外的 CSS 规则扩展给指令层内的 CSS，这样会生成大量的无用代码。意思是说，如果在 @media （或者其他 CSS 指令）中使用@extend，必须扩展给相同指令层中的选择器。

下面的例子是可行的：

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

但下面这个例子会报错：

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

希望有一天，浏览器可以原生支持 @extend 指令，这样就可以在@media和其他指令中使用扩展功能了。

@at-root

@at-root指令导致一个或多个规则被限定输出在文档的根层级上，而不是被嵌套在其父选择器下。
它可以被用于单一或内联选择器：

.parent {
  ...
  @at-root .child { ... }
}

这将生成：

.parent { ... }
.child { ... }

或者它可以用于包含多个选择器的代码块：

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

这将输出如下：

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

@at-root (without: …) 和 @at-root (with: …)（@at-root (without: …) and `@at-root (with: …)）

默认情况下， @at-root只是排除了选择器。然而，它也可以使用@at-root将选择器移动到嵌套指令（比如@media）之外。例如：

@media print {
  .page {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
}

生成：

@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: red;
}

您可以使用@at-root (without: …) 将规则移动到任何指令之外。你同样可以让多个指令做到这一点,只要多个指令使用空格分隔就可以了：@at-root (without: media supports)会将规则移动到@media 和 @supports查询（queries）之外。

还有有两个特殊值你可以传递给@at-root。”rule”是指正常的CSS规则;@at-root (without: rule)等价于没有查询的@at-root。 @at-root (without: all) 意思是该样式应该移动到全部的指令和CSS规则之外。

如果你想指定哪个指令或规则包含，而不是哪些应该排除，那么，你可以使用with代替without。
例如，@at-root (with: rule)将规则移动到所有指令之外，但在CSS规则内会保留。

@debug

@debug指令打印SassScript表达式的值到标准的错误输出流。这对于调试具有复杂SassScript 表达式的Sass文件非常有用的。例如：

@debug 10em + 12em;

输出：

Line 1 DEBUG: 22em

@warn

@warn指令打印SassScript表达式的值到标准的错误输出流。这对于警告用户弃用库或修复 mixin 轻微的错误是非常有用的。@warn和@debug之间有两个主要区别：

您可以使用–quiet命令行选项或:quiet Sass选项关闭警告。
样式表跟踪将与消息一起被打印出来，这样，用户可以看到他们的样式在哪里引起了警告。

用法示例:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
        @warn "Assuming #{$x} to be in pixels";
        $x: 1px * $x;
      }
      @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
        $y: 1px * $y;
      }
      position: relative; left: $x; top: $y;
}

@error

@error指令抛出一个SassScript表达式的值作为一个致命的错误，其中包括一个不错的堆栈跟踪。这对于验证混入（mixin）和函数的参数很有用。例如：

@mixin adjust-location($x, $y) {
  @if unitless($x) {
        @error "$x may not be unitless, was #{$x}.";
      }
      @if unitless($y) {
    @error "$y may not be unitless, was #{$y}.";
      }
      position: relative; left: $x; top: $y;
}

目前还没有办法捕获错误。

上一篇: SassScript 下一篇: 控制指令和表达式

目录

Sass中文文档

@规则 和 指令

@import

Partials

嵌套 @import（Nested @import ）

@media

@extend

它是如何工作的（How it Works）

扩展复杂的选择器（Extending Complex Selectors）

多重扩展 (Multiple Extends)

链式扩展（Chaining Extends）

选择器序列 (Selector Sequences)

@extend-Only 选择器 (@extend-Only Selectors)

!optional 标记（The !optional Flag）

指令中的@extend (@extend in Directives)

@at-root

@at-root (without: …) 和 @at-root (with: …)（@at-root (without: …) and `@at-root (with: …)）

@debug

@warn

@error

@规则和指令