目录
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 下一篇: 控制指令和表达式