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

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

上一篇: 下一篇: