Sass(七)中文文档3:@-Rules 与指令、extend(多重延伸、合并选择器列、@extend-Only 选择器%)、@at-root(without)、@debug、@warn
文章目录
- Sass(七)中文文档3:@-Rules 与指令、extend(多重延伸、合并选择器列、@extend-Only 选择器%)、@at-root(without)、@debug、@warn
- 7. @-Rules 与指令 (@-Rules and Directives)
- 7.1. @import
- 7.2. @media
- 7.3. @extend
- 7.4. @at-root
- 7.5. @debug
- 7.6. @warn
总结:
@extend
多重延伸
- 后定义的样式享有优先权
选择器列
选择器列 (Selector Sequences),比如
.foo .bar
或.foo + .bar
暂时不可以将选择器列 延伸给其他元素,但是,却可以将其他元素延伸给选择器列:
#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; }
合并选择器列
- 当两个列 (sequence) 合并时,如果没有包含相同的选择器,将生成两个新选择器:第一列出现在第二列之前,或者第二列出现在第一列之前
- 如果两个列 (sequence) 包含了相同的选择器,相同部分将会合并在一起,其他部分交替输出。在下面的例子里,两个列都包含
#admin
,输出结果中它们合并在了一起@extend-Only 选择器
- Sass 引入了“占位符选择器” (placeholder selectors)%
- 占位符选择器需要通过延伸指令使用,被延伸后,占位符选择器本身不会被编译。
@root
简介
- @at-root 指令导致在文档的根部发出一个或多个规则,而不是嵌套在它们的父选择器之下。
@at-root(without)
可以使用 @at-root 移出嵌套指令(例如 @media)。 例如:
@media print { .page { width: 8in; @at-root (without: media) { color: red; } } } ------------------------------------------------ @media print { .page { width: 8in; } } .page { color: red; }
7. @-Rules 与指令 (@-Rules and Directives)
Sass 支持所有的 CSS3 @-Rules,以及 Sass 特有的 “指令”(directives)。这一节会详细解释,更多资料请查看 控制指令 (control directives) 与 混合指令 (mixin directives) 两个部分。
7.1. @import
Sass 拓展了 @import
的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
Sass 在当前地址,或 Rack, Rails, Merb 的 Sass 文件地址寻找 Sass 文件,如果需要设定其他地址,可以用 :load_paths
选项,或者在命令行中输入 --load-path
命令。
通常,@import
寻找 Sass 文件并将其导入,但在以下情况下,@import
仅作为普通的 CSS 语句,不会导入任何 Sass 文件。
- 文件拓展名是
.css
; - 文件名以
http://
开头; - 文件名是
url()
; @import
包含 media queries。
如果不在上述情况内,文件的拓展名是 .scss
或 .sass
,则导入成功。没有指定拓展名,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 允许同时导入多个文件,例如同时导入 rounded-corners 与 text-shadow 两个文件:
@import "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");
7.1.1. 分音 (Partials)
如果需要导入 SCSS 或者 Sass 文件,但又不希望将其编译为 CSS,只需要在文件名前添加下划线,这样会告诉 Sass 不要编译这些文件,但导入语句中却不需要添加下划线。
例如,将文件命名为 _colors.scss
,便不会编译 _colours.css
文件。
@import "colors";
上面的例子,导入的其实是 _colors.scss
文件
注意,不可以同时存在添加下划线与未添加下划线的同名文件,添加下划线的文件将会被忽略。
7.1.2. 嵌套 @import
大多数情况下,一般在文件的最外层(不在嵌套规则内)使用 @import
,其实,也可以将 @import
嵌套进 CSS 样式或者 @media
中,与平时的用法效果相同,只是这样导入的样式只能出现在嵌套的层中。
假设 example.scss 文件包含以下样式:
.example {
color: red;
}
然后导入到 #main
样式内
#main {
@import "example";
}
将会被编译为
#main .example {
color: red;
}
Directives that are only allowed at the base level of a document, like @mixin or @charset, are not allowed in files that are @imported in a nested context. 这一句不理解
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import
。
7.2. @media
Sass 中 @media
指令与 CSS 中用法一样,只是增加了一点额外的功能:允许其在 CSS 规则中嵌套。如果 @media
嵌套在 CSS 规则内,编译时,@media
将被编译到文件的最外层,包含嵌套的父选择器。这个功能让 @media
用起来更方便,不需要重复使用选择器,也不会打乱 CSS 的书写流程。
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
编译为
.sidebar {
width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
@media` 的 queries 允许互相嵌套使用,编译时,Sass 自动添加 `and
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
编译为
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
@media
甚至可以使用 SassScript(比如变量,函数,以及运算符)代替条件的名称或者值:
$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; } }
7.3. @extend
在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式,一般会这样写:
<div class="error seriousError">
Oh no! You've been hacked!
</div>
样式如下
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
麻烦的是,这样做必须时刻记住使用 .seriousError
时需要参考 .error
的样式,带来了很多不变:智能比如加重维护负担,导致 bug,或者给 HTML 添加无语意的样式。使用 @extend
可以避免上述情况,告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
上面代码的意思是将 .error
下的所有样式继承给 .seriousError
,border-width: 3px;
是单独给 .seriousError
设定特殊样式,这样,使用 .seriousError
的地方可以不再使用 .error
。
其他使用到 .error
的样式也会同样继承给 .seriousError
,例如,另一个样式 .error.intrusion
使用了 hacked.png
做背景,<div class="seriousError intrusion">
也同样会使用 hacked.png
背景。
.error.intrusion {
background-image: url("/image/hacked.png");
}
7.3.1. How it Works
@extend
的作用是将重复使用的样式 (.error
) 延伸 (extend) 给需要包含这个样式的特殊样式(.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
)也会删除。
7.3.2. 延伸复杂的选择器 (Extending Complex Selectors)
Class 选择器并不是唯一可以被延伸 (extend) 的,Sass 允许延伸任何定义给单个元素的选择器,比如 .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
,包括其他使用到 a:hover
的样式,例如:
.hoverlink {
@extend a:hover;
}
.comment a.user:hover {
font-weight: bold;
}
编译为
.comment a.user:hover, .comment .user.hoverlink {
font-weight: bold; }
7.3.3. 多重延伸 (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
之后定义。
多重延伸可以使用逗号分隔选择器名,比如 @extend .error, .attention;
与 @extend .error;
@extend.attention
有相同的效果。
7.3.4. 继续延伸 (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
不仅包含 .seriousError
的样式也会同时包含 .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%; }
7.3.5. 选择器列 (Selector Sequences)
暂时不可以将选择器列 (Selector Sequences),比如 .foo .bar
或 .foo + .bar
,延伸给其他元素,但是,却可以将其他元素延伸给选择器列:
#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; }
7.3.5.1. 合并选择器列 (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; }
7.3.6. @extend-Only 选择器 (@extend-Only Selectors)
有时,需要定义一套样式并不是给某个元素用,而是只通过 @extend
指令使用,尤其是在制作 Sass 样式库的时候,希望 Sass 能够忽略用不到的样式。
如果使用普通的 CSS 规则,最后会编译出很多用不到的样式,也容易与其他样式名冲突,所以,Sass 引入了“占位符选择器” (placeholder selectors),看起来很像普通的 id
或 class
选择器,只是 #
或 .
被替换成了 %
。可以像 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 选择器一样,被延伸后,占位符选择器本身不会被编译。
.notice {
@extend %extreme;
}
编译为
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em; }
7.3.7. !optional
声明 (The !optional
Flag)
如果 @extend
失败会收到错误提示,比如,这样写 a.important {@extend .notice}
,当没有 .notice
选择器时,将会报错,只有 h1.notice
包含 .notice
时也会报错,因为 h1
与 a
冲突,会生成新的选择器。
如果要求 @extend
不生成新选择器,可以通过 !optional
声明达到这个目的,例如:
a.important {
@extend .notice !optional;
}
7.3.8. 在指令中延伸 (@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
指令,这样就可以在任何指令中使用延伸功能,不再受限制了。
7.4. @at-root
@at-root 指令导致在文档的根部发出一个或多个规则,而不是嵌套在它们的父选择器之下。 它可以与单个内联选择器一起使用:
.parent {
...
@at-root .child { ... }
}
这将产生:
.parent { ... }
.child { ... }
或者它可以与包含多个选择器的块一起使用:
.parent {
...
@at-root {
.child1 { ... }
.child2 { ... }
}
.step-child { ... }
}
这将输出以下内容:
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }
7.4.1. @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(没有:媒体支持)移动到@media 和@supports 查询之外。
有两个特殊值可以传递给@at-root。 “规则”指的是普通的 CSS 规则; @at-root (without: rule) 和 @at-root 一样,没有查询。 @at-root (without: all) 意味着样式应该移到所有指令和 CSS 规则之外。
如果要指定要包含哪些指令或规则,而不是列出应排除哪些指令或规则,则可以使用 with 而不是 without。 例如,@at-root (with: rule) 将移到所有指令之外,但会保留所有 CSS 规则。
7.5. @debug
@debug 指令将 SassScript 表达式的值打印到标准错误输出流。 它对于调试具有复杂 SassScript 的 Sass 文件很有用。 例如:
@debug 10em + 12em;
编译为
Line 1 DEBUG: 22em
7.6. @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;
}