CSS 预处理器 —— Sass 进阶篇
参考网址:
- scss 官网
- W3Cschool sass 教程 https://www.w3cschool.cn/sass…
Sass 支持所有的 CSS3 @-Rules,以及 Sass 特有的“指令”(directives)。这一节会详细解释,更多资料请查看 控制指令 (control directives) 与 混合指令 (mixin directives) 两个部分。
五、@-Rules 与指令
CSS3 的 @-Rules 指令有:
-
@import 规则:将另一个样式表导入当前样式表。
- 它应该出现在任何规则之前的样式表的开头,它的值是一个 URL
-
@charset 规则:指示样式表使用的字符集。
- @charset 规则必须直接写在样式表的开头,甚至没有空格
- 该值保存在引号中,应该是标准字符集之一
- @font-face 规则:用于详尽地描述在文档中使用的字体。
- !important 规则:表示用户定义的规则应优先于作者的样式表。
1. | @import | 它用于导入 sass 或 scss 文件。它直接将文件名导入。 |
---|---|---|
2. | @media | 用于将样式规则设置为不同的媒体类型。 |
3. | @extend | 它指定并共享选择器之间的规则和关系。 |
4. | @at-root | 它被指定为嵌套规则的集合, 这些规则可以在文档的根目录创建样式块。 |
5. | @debug | 该伪指令用于检测错误, 并将 SassScript 表达式值显示到标准错误输出流。 |
6. | @warn | 该指令用于获取有关该问题的警告性建议。它将 SassScript 表达式值显示到标准错误输出流。 |
7. | @error | 此伪指令用于将 SassScript 表达式值显示为致命错误。 |
5.1 @import 导入
Sass 拓展了 @import
的功能,允许其导入 SCSS 或 Sass 文件。
1. 例外情况
通常,@import
寻找 Sass 文件并将其导入,但在以下情况下,@import
仅作为普通的 CSS 语句,不会导入任何 Sass 文件。
- 文件拓展名是
.css
; - 文件名以
http://
开头; - 文件名是
url()
; -
@import
包含 media queries。
2. 基础知识
Sass 拓展了 @import
的功能:
-
若不存在上面的 4 种情况,文件的拓展名是
.scss
或.sass
,则导入成功- 就算没有指定拓展名,Sass 也会试着寻找文件名相同,拓展名为
.scss
或.sass
的文件并将其导入
- 就算没有指定拓展名,Sass 也会试着寻找文件名相同,拓展名为
- Sass 允许同时导入多个文件,使用逗号
,
进行分隔 - 导入文件也可以使用
#{}
插值语句,但只能作用于 CSS 的url()
导入方式,而不是通过变量动态导入 Sass 文件 - 被导入的文件将 合并编译到同一个 CSS 文件 中
- 被导入的文件中所包含的 变量或者混合指令 (mixin) 都可以在导入的文件中使用 —— 变量和 mixin 可通用
-
Sass 在当前地址寻找 Sass 文件
- 如果需要设定其他地址,可以用
:load_paths
选项,或者在命令行中输入--load-path
命令
- 如果需要设定其他地址,可以用
/** 4 种情况 @import 仅作为普通的 CSS 语句 */
@import "foo.css"; // 文件拓展名是 .css
@import "foo" screen; // @import 包含 media queries
@import "http://foo.com/bar"; // 文件名以 http:// 开头
@import url(foo); // 文件名是 url()
/** 正确示例 */
@import "foo.scss"; // 文件的拓展名是 .scss 或 .sass
@import "foo"; // 没有扩展名,Sass 会试着找 foo.scss 或者 foo.sass 进行导入
@import "rounded-corners", "text-shadow"; // 同时导入多个文件,使用逗号进行分隔
/** 使用插值语句 -- 只能作用域 CSS 的 url() 导入方式 */
$family: unquote("Droid+Sans"); // 字符串内置函数 unquote(str)去除引号
// CSS url()方式导入
// 编译结果:
3. 局部 (Partials)
如果需要导入 SCSS 或者 Sass 文件,但又不希望将其编译为 CSS,只需要 在文件名前添加下划线 ,这样会告诉 Sass 不要编译这些文件,但 导入语句中却不需要添加下划线。
—— 需要导入 + 不希望被编译 —- 将文件命名时,前面加上下划线。
—— 如:文件名为 _colors.scss;导入 @import colors.scss; 其实导入的就是 _colors.scss 文件
—— 注意: 不可存在同名文件,即不能再有 colors.scss 文件 —- 因为导入语句中不需要添加下划线
注意,不可以同时存在添加下划线与未添加下划线的同名文件,添加下划线的文件将会被忽略。
4. 嵌套 @import
大多数情况下,一般在文件的最外层(不在嵌套规则内)使用 @import
,其实,也可以将 @import
嵌套进 CSS 样式或者 @media
中,与平时的用法效果相同,只是这样导入的样式只能出现在嵌套的层中。
可以理解成作用域:
- 在文件最外层使用 @import —- 导入的样式、变量、mixin 等全局可用 —- 全局
- 在嵌套规则内,或者 @media 中 —- 导入的样式只能出现在嵌套的层中 —- 局部
注意:不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import
// example.scss
.example {color: red;}
// index.scss
#main {@import "example"; // 导入到 #main 样式内}
// 编译结果
#main .example {color: red;}
5. 与原生 CSS 中的 @import 的区别
- 原生 CSS 的 @import 命令有一个缺陷,它会造成多次 HTTP 请求,导致效率低下因为是在解析执行 CSS 代码遇到此命令的时候,才会去下载此命名引入的文件,很明显这不够优化,所以在实际应用中并不推荐使用
- SCSS 中不用担心上述问题,它虽然与 CSS 终使用方式比较类似,但是最终 SCSS 要编译成一个目标 CSS 文件,被引入的 SCSS 文件中的 CSS 代码会被合并到目标 CSS 文件中,所以不会产生一次额外的请求
- SCSS 可删减无用 css 文件 —- 分音 partials
- SCSS 还可以在规则块内导入外部文件 —– 嵌套
5.2 @media 媒体查询
CSS 中的 @media
规则指定一组规则的目标媒体类型(以逗号分隔)
Sass 中 @media
指令与 CSS 中用法一样,只是增加了一点额外的功能:允许其在 CSS 规则中嵌套。如果 @media
嵌套在 CSS 规则内,编译时,@media
将被编译到文件的最外层,包含嵌套的父选择器。这个功能让 @media
用起来更方便,不需要重复使用选择器,也不会打乱 CSS 的书写流程。
.sidebar {
width: 300px;
@media screen and (orientation: landscape) { // @media 嵌套在 CSS 规则内
width: 500px;
}
}
// 编译后
.sidebar {width: 300px;}
@media screen and (orientation: landscape) { // 编译时,@media 被编译到文件的最外层
.sidebar {width: 500px;}
}
@media
的 queries
允许互相嵌套 使用,编译时,Sass
自动添加 and
@media screen {
.sidebar {@media (orientation: landscape) { // 嵌套使用
width: 500px;
}
}
}
// 编译后 --- sass 自动添加 and 进行拼接
@media screen and (orientation: landscape) {.sidebar { width: 500px;}
}
@media
甚至可以 使用 SassScript(比如变量,函数,以及运算符)代替条件的名称或者值
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
// 使用变量
// 可参考插值一章:如果 @media 后面直接跟变量,就需要用插值语句; 如果跟着圆括号,则不需要用插值语句
@media #{$media} and ($feature: $value) {
.sidebar {width: 500px;}
}
// 编译后
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {.sidebar { width: 500px;}
}
5.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;
}
.error.intrusion { // ** 其他使用到 `.error` 的样式也会同样继承给 `.seriousError`**
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error; // 使用 @extend 继承.error 的所有样式
border-width: 3px; // 单独给 .seriousError 设定特殊样式
}
// 编译后
.error, .seriousError {border: 1px #f00;background-color: #fdd;}
.error.intrusion, .seriousError.intrusion {background-image: url("/image/hacked.png");}
.seriousError {border-width: 3px;}
这样,使用 .seriousError
的地方可以不再使用 .error
。
其他使用到 .error
的样式也会同样继承给 .seriousError
,例如,另一个样式 .error.intrusion
使用了 hacked.png
做背景,` 也同样会使用
hacked.png` 背景。
1. How it Works
@extend
的作用是将重复使用的样式 (.error
) 延伸 (extend) 给需要包含这个样式的特殊样式(.seriousError
)
当合并选择器时,@extend
会很聪明地避免无谓的重复,.seriousError.seriousError
将编译为 .seriousError
,不能匹配任何元素的选择器(比如 #main#footer
)也会删除
2. 延伸复杂的选择器
Class 选择器并不是唯一可以被延伸 (extend) 的,Sass 允许延伸 任何定义给单个元素的选择器,比如 .special.cool
,a:hover
或者 a.user[href^="http://"]
等,例如:
.hoverlink {@extend a:hover; // 所有 a:hover 的样式将继承给 .hoverlink,包括其他使用到 a:hover 的样式}
a:hover {text-decoration: underline;}
.comment a.user:hover {font-weight: bold;}
// 编译结果
a:hover, .hoverlink {text-decoration: underline;}
.comment a.user:hover, .comment .user.hoverlink {font-weight: bold;}
3. 多重延伸
同一个选择器可以 延伸给多个选择器,它所包含的属性将继承给所有被延伸的选择器
.error {
border: 1px #f00;
background-color: #fdd;
}
.attention {
font-size: 3em;
background-color: #ff0;
}
.seriousError { // 可以写成 @extend .error, .attention;
@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
有相同的效果。
4. 继续延伸
当一个选择器延伸给第二个后,可以继续将第二个选择器延伸给第三个,例如:
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error; // 将.error 的所有样式延伸给.seriousError
border-width: 3px;
}
.criticalError {
@extend .seriousError; // 将.seriousError 的所有样式延伸给.criticalError
color: #fff;
}
// 编译结果
.error, .seriousError, .criticalError {border: 1px #f00; background-color: #fdd;}
.seriousError, .criticalError {border-width: 3px;}
.criticalError {color: #fff;}
每个 .seriousError
选择器将包含 .error
的样式,而 .criticalError
不仅包含 .seriousError
的样式也会同时包含 .error
的所有样式
5. 选择器列
暂时不可以将选择器列 (Selector Sequences),比如 .foo .bar
或 .foo + .bar
,延伸给其他元素,但是,却可以将其他元素延伸给选择器列:
#fake-links .link { // 将 a 的所有样式继承选择器列:#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;}
5.1. 合并选择器列
有时会遇到复杂的情况,比如选择器列中的某个元素需要延伸给另一个选择器列,这种情况下,两个选择器列需要合并,比如:
#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;}
6. @extend-Only 选择器
有时,需要定义一套样式并不是给某个元素用,而是只通过 @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. !optional
声明
如果 @extend
失败会收到错误提示,比如,这样写 a.important {@extend .notice}
,当没有 .notice
选择器时,将会报错,只有 h1.notice
包含 .notice
时也会报错,因为 h1
与 a
冲突,会生成新的选择器。
如果要求 @extend
不生成新选择器,可以通过 !optional
声明达到这个目的,例如:
a.important {@extend .notice !optional;}
8. 在指令中延伸
在指令中使用 @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
指令,这样就可以在任何指令中使用延伸功能,不再受限制了。
5.4 @at-root
@at-root 指令可以 使一个或多个规则被限定输出在文档的根层级上,而不是被嵌套在其父选择器下。
.parent{
color:red;
@at-root .child { // 使用 @at-root 将.child 规则输出到文档的根层级上
color: #fff;
}
}
// 编译结果
.parent {color: red;}
.child {color: #fff;} // 由于使用 @at-root 命令,那么.child 就不参与嵌套,直接跳出嵌套
示例 2:@at-root 使多个规则跳出嵌套
.parent {
background:red;
@at-root {.child-1 { color: yellow;}
.child-2 {color: red;}
}
}
// 编译结果
.parent {background: red;}
.child-1 {color: yellow;}
.child-2 {color: red;}
代码 在默认情况下 @at-root 并不会使指定的规则或则选择器跳出指令,比如 @media 或者 @supports
@media print {
@at-root{.foo { color: green;}
}
}
// 编译结果
@media print {.foo { color: green;}
}
可以看出 @at-root 默认情况下并不能使规则或者选择器跳出指令。
解决方法:和 without 和 with 配合使用解决上述问题
1. 搭配 without
默认 @at-root 只会跳出选择器嵌套,而不能跳出 @media 或 @support 指令。
如果要跳出这两种指令,则需使用@at-root (without: media)
,@at-root (without: support)
。
这个语法的关键词有四个:
- .all:表示所有。
- .rule:表示常规 css。
- .media:表示 media。
- .support:表示 support。
默认的 @at-root 就是 @at-root (without: rule)。
@media print {
.parent{
color:#f00;
@at-root .child {color: #0ff;} // child 只能够跳出.parent,但是不能够跳出 @media
}
}
// 编译结果
@media print {.parent { color: red;} .child {color: #0ff;} }
@media print {
.parent{
color:red;
@at-root (without: media) { // 指定只跳出 media,但并不会跳出.parent
.child {color: #0ff;}
}
}
}
// 编译结果
@media print {.parent { color: red;} }
.parent .child {color: #0ff;}
@media print {
.parent{
color:red;
@at-root (without: all) { // all 标识要跳出所有
.child {color: #0ff;}
}
}
}
// 编译结果
@media print {.parent { color: red;} }
.child {color: #0ff;}
2. 搭配 with
with 的作用恰好和 without 相反,如果说 without 作用是指定跳出哪些指令的话,那么with 就是指定不跳出哪些指令,其他的指令都跳出
@media print {@supports ( transform-origin: 5% 5%) {@at-root (with: supports){ // 除了 supports,其他指令都跳出
.foo {color: green;}
}
}
}
// 编译结果
@supports (transform-origin: 5% 5%) {.foo { color: green;} }
5.5 @debug
@debug
伪指令检测错误,并将 SassScript 表达式值显示到标准错误输出流
$font-sizes: 10px + 20px; // 算术表达式
$style: ( // maps 类型
color: #bdc3c7
);
.container{
@debug $style;
@debug $font-sizes;
}
// 输入命令 sass --watch C:\ruby\lib\sass\debug.scss:debug.css
5.6 @warn
Sass @warn 指令在出现问题并希望向用户提供警告性建议时使用。它将 SassScript 表达式的值显示到标准错误输出流。
@warn 和 @debug 之间有两个特定的区别:
- 可以使用–quiet 命令行选项或:quiet Sass 选项关闭警告。
- Sass @warn 伪指令提供打印输出以及消息, 以便在警告发生的地方警告用户。
示例:让我们创建一个名为”warn.scss”的 SCSS 文件, 其中包含以下数据。
$main-color: #bdc3c7;
@warn "Darker:" darken($main-color, 30%);
现在, 打开命令提示符并运行 watch 命令, 以告知 SASS 监视文件并在更改 SASS 文件时更新 CSS。
执行以下代码:sass –watch warn.scss:warn.css
它将在同一目录中自动创建一个名为”warn.css”的普通 CSS 文件。
5.7 @error
@error 指令将 SassScript 表达式值显示为致命错误。
$colors: (
blue: #c0392b,
black: #2980b9,
);
@function style-variation($style) {@if map-has-key($colors, $style) {@return map-get($colors, $style);
}
@error "Invalid color:'#{$style}'.";
}
.container {style: style-variation(white);
}
六、控制指令 (Control Directives)
SassScript 提供了一些基础的控制指令,比如在满足一定条件时引用样式,或者设定范围重复输出格式。控制指令是一种高级功能,日常编写过程中并不常用到,主要与混合指令 (mixin) 配合使用,尤其是用在 Compass 等样式库中。
if()
语法:
if(expression, value1, value2)
说明:内置函数,基于条件 expression,如果表达式结果为真,则返回 value1;为假则返回 value2。函数的结果可以参考可能未被定义的变量或具有进一步的计算。
h2{color: if( 1 + 1 == 2 , green , red);
}
// 编译结果
h2 {color: green;}
@if
- 当
@if
的表达式返回值不是false
或者null
时,条件成立,输出{}
内的代码 -
@if
声明后面可以跟多个@else if
声明,或者一个@else
声明。如果@if
声明失败,Sass 将逐条执行@else if
声明,如果全部失败,最后执行@else
声明
$type: monster;
p {@if 1 + 1 == 2 { border: 1px solid;} // 表达式的值是 true -- 真
@if 5 < 3 {border: 2px dotted;} // 表达式的值是 false -- 假
@if null {border: 3px double;} // 表达式的值是 null -- 假
@if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
}
@for
@for
指令可以 在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。
两种格式:
@for $var from <start> through <end>
@for $var from <start> to <end>
区别在于
through
与to
的含义:- 当使用
through
时,条件范围包含<start>
与<end>
的值;start <= $val <= end —– [start, end]- 使用
to
时条件范围只包含<start>
的值不包含<end>
的值;start <= $val < end —– [start, end)
$var
可以是任何变量,比如$i
;<start>
和<end>
必须是整数值
@for $index from 1 through 3 {.item-#{$index} {width: 2em * $index;}
}
// 编译结果
.item-1 {width: 2em;} .item-2 {width: 4em;} .item-3 {width: 6em;}
@each
语法:
@each $var in <list or map>
说明:
$var
可以是任何变量名,比如$length
,$name
;
<list or map>
是一连串的值,也就是值列表(数组、Maps …)
@each
将变量 $var
作用于值列表中的每一个项目,然后输出结果,例如:
// 声明变量 $animal 循环列表:puma, sea-slug, egret, salamander
@each $animal in puma, egret, sea-slug, salamander {.#{$animal}-icon {background-image: url('/images/#{$animal}.png');
}
}
// 编译结果
.puma-icon {background-image: url('/images/puma.png'); }
.egret-icon {background-image: url('/images/egret.png'); }
.sea-slug-icon {background-image: url('/images/sea-slug.png'); }
.salamander-icon {background-image: url('/images/salamander.png'); }
1. @each 多个分配
语法:
@each $var1, $var2, $var3 ... in <list>
说明:<list> 表示列表的列表,每个变量将保存子列表的元素
$mul-list: (puma, black, default), (slug, blue, pointer), (egret, white, move);
@each $animal, $color, $cursor in $mul-list {.#{$animal}-icon {background: url('/images/#{$animal}.png');
border-color: 2px solid $color;
cursor: $cursor;
}
}
// 编译结果
.puma-icon {background: url('/images/puma.png'); border-color: black; cursor: default; }
.slug-icon {background: url('/images/slug.png'); border-color: blue; cursor: pointer; }
.egret-icon {background: url('/images/egret.png'); border-color: white; cursor: move; }
2. @each 多个分配与映射
语法:
@each $var1, $var2 in <map>
说明:<map> 表示键值对的列表
$mul-map: (h1: red, h2: green, h3: blue);
@each $header, $color in $mul-map {#{$header} {color: $color;}
}
// 编译结果
h1 {color: red;} h2 {color: green;} h3 {color: blue;}
@while
@while
指令 重复输出格式直到表达式返回结果为 false
。这样可以实现比 @for
更复杂的循环,只是很少会用到。
语法:while(condition) {// CSS codes…}
说明:要注意,计数器变量需要在每次迭代时递增 / 递减。
$i: 30;
@while $i > 0 {.paddding-#{$i} {padding-left: 1px * $i;}
$i: $i - 10; // 计数器变量在每次迭代时递减
}
// 编译结果
.paddding-30 {padding-left: 30px;}
.paddding-20 {padding-left: 20px;}
.paddding-10 {padding-left: 10px;}
七、混合指令 (Mixin Directives)
Mixins 允许创建一组可以在整个样式表中 重复使用的样式 ,而不需要重新创建非语义类。混合指令可以包含 所有的 CSS 规则 , 绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。
在 CSS 中,mixin 可以存储多个值或参数和调用函数; 它有助于避免编写重复的代码。混合名称可以交替使用下划线和连字符。
7.1 定义 @mixin
混合指令的用法是在 @mixin
后添加名称与样式
语法:@mixin 混合指令名称 {// css code, sass code …}
// 定义混合指令 clearfix
@mixin clearfix {
display: inline-block;
&:after { // 使用父选择器标识符
content: ".";
height: 0;
clear: both;
visibility: hidden;
}
* html & {height: 1px}
}
7.2 引用 @include
@include 指令用于在文档中引用混合样式 mixin。格式是在其后添加混合名称,并传递需要的参数(可选)。由 mixin 定义的样式可以包含在当前规则中。
语法:@include 混合指令名称(参数[可选] )
.page-title {@include clearfix;}
// 编译结果
.page-title {display: inline-block;}
.page-title:after {content: "."; height: 0; clear: both; visibility: hidden;}
* html .page-title {height: 1px;}
也可以在最外层引用混合样式,不会直接定义属性,也不可以使用父选择器
@mixin silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links;
// 编译结果
a {color: blue; background-color: red;}
混合样式中也可以包含其他混合样式
@mixin highlighted-background {background-color: #fc0;}
@mixin header-text {font-size: 20px;}
@mixin compound {
@include highlighted-background;
@include header-text;
}
混合样式中应该只定义后代选择器,这样可以安全的导入到文件的任何位置。
7.3 参数 (Arguments)
参数用于 给混合指令中的样式设定变量 , 并且赋值使用。在定义混合指令的时候,按照变量的格式,通过逗号分隔,将参数写进圆括号里。引用指令时,按照参数的顺序,再将所赋的值对应写进括号:
定义:@mixin 混合指令名称($param1: 默认值, $param2, …) {// css code, sass code…}
引用:@include 混合指令名称($val1, $val2, …)
@mixin sexy-border($color, $width: 1in) { // 定义了两个参数 $color 和 $width, $width 的缺省值为 1in
border: {
color: $color;
width: $width;
style: dashed;
}
}
p {@include sexy-border(blue); } // 只传入一个参数 $color, 使用 $width 的默认值
h1 {@include sexy-border(blue, 2in); } // 传入两个参数
// 编译结果
p {border-color: blue; border-width: 1in; border-style: dashed;}
h1 {border-color: blue; border-width: 2in; border-style: dashed;}
1. 关键词参数 (Keyword Arguments)
混合指令也可以使用关键词参数,上面的例子也可以写成:
p {@include sexy-border($color: blue); }
h1 {@include sexy-border($color: blue, $width: 2in); }
虽然不够简明,但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口,以及容易调用的参数。关键词参数 可以打乱顺序使用 ,如果使用默认值也可以省缺,另外, 参数名被视为变量名,下划线、短横线可以互换使用。
2. 参数变量 (Variable Arguments)
有时,不能确定混合指令需要使用多少个参数,比如一个关于 box-shadow
的混合指令不能确定有多少个 ‘shadow’ 会被用到。这时,可以使用 参数变量 …
声明(写在参数的最后方)告诉 Sass 将这些参数视为值列表处理:
@mixin box-shadow($shadows...) { // 参数变量 用于定义 mixin
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
// 编译为
.shadowed {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
参数变量也可以用在引用混合指令的时候 (@include
),与平时用法一样,将一串值列表中的值逐条作为参数引用:
@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {@include colors($values...); // 参数变量 用于引用 mixin
}
// 编译为
.primary {
color: #ff0000;
background-color: #00ff00;
border-color: #0000ff;
}
可以使用变量参数包装 mixin 并添加其他样式,而无需更改 mixin 的参数签名。如果这样做,甚至关键字参数都将传递到包装的 mixin。例如:
@mixin wrapped-stylish-mixin($args...) {
font-weight: bold;
@include stylish-mixin($args...);
}
.stylish {
// The $width argument will get passed on to "stylish-mixin" as a keyword
@include wrapped-stylish-mixin(#00ff00, $width: 100px);
}
7.4 向混合样式中导入内容
在引用混合样式的时候,可以先将一段代码导入到混合指令中,然后再输出混合样式,额外导入的部分将出现在 @content
标志的地方。
注意: 当 @content
在指令中出现过多次或者出现在循环中时,额外的代码将被导入到每一个地方。
@mixin apply-to-ie6-only {
* html {@content; // @content 将被替换成 传入的代码块}
}
@include apply-to-ie6-only {
#logo {background-image: url(/logo.gif);
}
}
// * html #logo {background-image: url(/logo.gif); }
为便于书写,@mixin
可以用 =
表示,而 @include
可以用 +
表示,所以上面的例子可以写成:
=apply-to-ie6-only
* html
@content
+apply-to-ie6-only
#logo
background-image: url(/logo.gif)
传递给 mixin 的内容块是在定义块的作用域中计算的,而不是在 mixin 的作用域中。这意味着不能在传递的样式块中使用 mixin 的本地变量,并且变量将解析为全局值
$color-1: white;
$color: red;
@mixin colors($color: blue) {
background-color: $color;
@content;
border-color: $color;
}
.colors {@include colors { color: $color-1;} // 传递的内容块在引用时就计算,所以引用的变量不能时 mixin 内的
}
// 编译结果
.colors {background-color: blue; color: white; border-color: blue;}
八、函数指令 (Function Directives)
Sass 支持自定义函数,并能在任何属性值或 Sass script 中使用
- 【命名约定】为了避免命名冲突,函数名称可以带前缀,以便可以轻松区分;函数和其他 Sass 标识符可以交替使用下划线(_)和连字符(–)
- 就像 mixin 一样,函数也可以访问全局定义的变量,也可以接受参数,也支持变量参数。
- 应该使用 @return 来调用函数的返回值。
- 可以使用关键字参数调用 SASS 定义的函数
fn-name($param1: val1, $param2: val2 ...)
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar {width: grid-width(5); } // 使用关键字参数调用 width: grid-width($n: 5);