Sass学习笔记2 - 进阶篇

CSS预处理器 —— 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 允许同时导入多个文件,使用逗号 , 进行分隔
  • 导入文件也可以使用 #{ } 插值语句,但只能作用于 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)去除引号
@import url("http://fonts.googleapis.com/css?family=\#{$family}"); // CSS url()方式导入
// 编译结果: @import url("http://fonts.googleapis.com/css?family=Droid+Sans");
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; } 
}

@mediaqueries 允许互相嵌套使用,编译时,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.coola: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),看起来很像普通的 idclass 选择器,只是 #. 被替换成了 %。可以像 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 时也会报错,因为 h1a 冲突,会生成新的选择器。

​ 如果要求 @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)

这个语法的关键词有四个:

  1. .all:表示所有。
  2. .rule:表示常规css。
  3. .media:表示media。
  4. .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
03-@debug.png

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文件。

03-@warn.png

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);
}
03-@error.png

六、控制指令 (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

  1. @if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码

  2. @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 指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。

两种格式:

  1. @for $var from <start> through <end>
  2. @for $var from <start> to <end>

区别在于 throughto 的含义:

  1. 当使用 through 时,条件范围包含 <start><end> 的值; start <= $val <= end ----- [start, end]
  2. 使用 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 中使用

  1. 【命名约定】为了避免命名冲突,函数名称可以带前缀,以便可以轻松区分;函数和其他Sass标识符可以交替使用下划线(_)和连字符( - )
  2. 就像mixin一样,函数也可以访问全局定义的变量,也可以接受参数,也支持变量参数。
  3. 应该使用 @return 来调用函数的返回值。
  4. 可以使用关键字参数调用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);
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341