课程表

SASS 基础

SASS 高级

工具箱
速查手册

Sass 控制指令

当前位置:免费教程 » HTML/CSS » SASS

SassScript 提供了一些基础的控制指令,比如在满足一定条件时引用样式,或者设定范围重复输出格式。控制指令是一种高级功能,日常编写过程中并不常用到,主要与混合指令 (mixin) 配合使用,尤其是用在 Compass 等样式库中。

if()

内置的if()函数允许你在一个有2个可能条件分支的情况下,得到一个明确的返回值。它可用于任何脚本内容中。if()函数只计算被正确使用的语句,这将允许你传递未申明的变量,或者使用会导致错误的计算。


@if

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

  1. p {
  2. @if 1 + 1 == 2 { border: 1px solid; }
  3. @if 5 < 3 { border: 2px dotted; }
  4. @if null { border: 3px double; }
  5. }

编译为

  1. p {
  2. border: 1px solid; }

@if 声明后面可以跟多个 @else if 声明,或者一个 @else 声明。如果 @if 声明失败,Sass 将逐条执行 @else if 声明,如果全部失败,最后执行 @else 声明,例如:

  1. $type: monster;
  2. p {
  3. @if $type == ocean {
  4. color: blue;
  5. } @else if $type == matador {
  6. color: red;
  7. } @else if $type == monster {
  8. color: green;
  9. } @else {
  10. color: black;
  11. }
  12. }

编译为

  1. p {
  2. color: green; }

@for

@for 指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。这个指令包含两种格式:@for $var from <start> through <end>,或者 @for $var from <start> to <end>,区别在于 throughto 的含义:当使用 through 时,条件范围包含 <start><end> 的值,而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外,$var 可以是任何变量,比如 $i<start><end> 必须是整数值。

  1. @for $i from 1 through 3 {
  2. .item-#{$i} { width: 2em * $i; }
  3. }

编译为

  1. .item-1 {
  2. width: 2em; }
  3. .item-2 {
  4. width: 4em; }
  5. .item-3 {
  6. width: 6em; }

@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名,比如 $length 或者 $name,而 <list> 是一连串的值,也就是值列表。

@each 将变量 $var 作用于值列表中的每一个项目,然后输出结果,例如:

  1. @each $animal in puma, sea-slug, egret, salamander {
  2. .#{$animal}-icon {
  3. background-image: url('/images/#{$animal}.png');
  4. }
  5. }

编译为

  1. .puma-icon {
  2. background-image: url('/images/puma.png'); }
  3. .sea-slug-icon {
  4. background-image: url('/images/sea-slug.png'); }
  5. .egret-icon {
  6. background-image: url('/images/egret.png'); }
  7. .salamander-icon {
  8. background-image: url('/images/salamander.png'); }

多行分配

@each指令也可以用作多重参数,例如列表或者多级列表中的@each $var1, $var2, ... 每个子列表元素将被赋于参数传递的值。例如:

  1. @each $animal, $color, $cursor in (puma, black, default),
  2. (sea-slug, blue, pointer),
  3. (egret, white, move) {
  4. .#{$animal}-icon {
  5. background-image: url('/images/#{$animal}.png');
  6. border: 2px solid $color;
  7. cursor: $cursor;
  8. }
  9. }

将被编译为:

  1. .puma-icon {
  2. background-image: url('/images/puma.png');
  3. border: 2px solid black;
  4. cursor: default; }
  5. .sea-slug-icon {
  6. background-image: url('/images/sea-slug.png');
  7. border: 2px solid blue;
  8. cursor: pointer; }
  9. .egret-icon {
  10. background-image: url('/images/egret.png');
  11. border: 2px solid white;
  12. cursor: move; }

当地图(maps)被视为多级列表处理时,也可以使用多重分配。例如:

  1. @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  2. #{$header} {
  3. font-size: $size;
  4. }
  5. }

将被编译为:

  1. h1 {
  2. font-size: 2em; }
  3. h2 {
  4. font-size: 1.5em; }
  5. h3 {
  6. font-size: 1.2em; }

@while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环,只是很少会用到。例如:

  1. $i: 6;
  2. @while $i > 0 {
  3. .item-#{$i} { width: 2em * $i; }
  4. $i: $i - 2;
  5. }
  1. .item-6 {
  2. width: 12em; }
  3. .item-4 {
  4. width: 8em; }
  5. .item-2 {
  6. width: 4em; }
转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号