Sass控制命令:@if,@for,@each和@while

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

本文由大漠根据Adam Stacoviak的《Sass control directives: @if, @for, @each and @while》一文所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://thesassway.com/intermediate/if-for-each-while,以及作者相关信息。

——作者:Adam Stacoviak

——译者:大漠

Sass的控制命令是创建库和重复使用代码库的一个基础,使用好Sass,需要掌握好Sass的控制命令,只有掌握了这些,你才能进入Sass的下一个层次的学习。

Sass控制命令的速成

Sass控制命令可以让你在编写@mixin@function时提供相应的流程和逻辑判断。

在这篇文章中我们将覆盖:@if@for@each@while

使用守则

如果你想跟着这篇文章学习Sass控制命令,你可以先从Github下载相应的示例代码。

为了更好的帮助大家理解,我将示例中的Sass语法格式更换成SCSS格式。——@大漠

@if

@if指令是一个SassScript,它可以根据条件来处理样式块,如果条件为true返回一个样式块,反之false返回另一个样式块。

这里有一个@if指令的简单示例,我已经对示例做了简化处理,只适合阅读,并不太实用。

$boolean: true !default;

@mixin simple-mixin {
    @if $boolean {
        @debug "$boolean is #{$boolean}";
        display: block;
    }
    @else {
        @debug "$boolean is #{$boolean}";
        display: none;
    }
}

.some-selector {
    @include simple-mixin;
}

编译出来的CSS:

.some-selector {
  display: block; }

还要注意在每个选项中都加了一个@debug信息。在这篇文章中并不详细介绍@debug,但是我添加了,主要是在命令行中输出时可以看到提示信息,让用户了解某些事情。在一些复杂的@mixin@function中使用@warn@debug,可以起到一定的作用,可以让程序员更容易的发现和追查问题,也更好的提供用户体验。

正如上面的示例,我们在终端编译之后,可以看到@degbug中的对应相关信息:

>>> Change detected to: test.scss
test.scss:7 DEBUG: $boolean is true
      write test.css
      write test.css.map

@for

@for指令有两种形式。

第一种形式是:

@for $var from <start> through <end>

<start>开始循环,到<end>结束,非常简单明了。来看一个简单的示例:

$class-slug: for !default;

@for $i from 1 through 4 {
    .#{$class-slug}-#{$i}{
        width: 60px + $i;
    }
}

编译出来的CSS

.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

.for-4 {
  width: 64px; }

从示例中我们可以明确的知道,从<start>开始(此处示例是1),一直遍历到<end>(此处示例是4)。包括<end>的值。

第二种形式是:

@for $var from <start> to <end>

循环从<start>开始,一直遍历循环到<end>结束。这种形式的循环只要碰到<end>就会停止循环(将不会遍历<end>值)。我们来看一个示例:

$class-slug: for !default;

@for $i from 1 to 4 {
    .#{$class-slug}-#{$i}{
        width: 60px + $i;
    }
}

编译出来的CSS

.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

@for循环指令除了可以从小数值到大数值循环之外,还可以从大数值循环到小数值。而且两种形式都支持。

$class-slug: for !default;

@for $i from 5 through 1 {
    .#{$class-slug}-#{$i}{
        width: 60px + $i;
    }
}

编译出CSS

.for-5 {
  width: 65px; }

.for-4 {
  width: 64px; }

.for-3 {
  width: 63px; }

.for-2 {
  width: 62px; }

.for-1 {
  width: 61px; }

在两种形式之下,$var都可以是任意的变量名。在通常的习惯中,一般都将$var命名为$i来做变量名,用于@for指令的递增或递减。

如果你真想看看@for指令的真实示例,你可以看看通过他创建的一个网格系统。你可以在网格系统项目的第37-53行看到@for的使用。

你可以在文件中看到下面这样的代码样本:

// Loops to enumerate the classes
// Yep, this saves us tons of typing (if this were CSS)
@for $i from 1 through $grid-columns {
  .grid-#{$i} { @include grid-base($i); @extend .grid-block; }
}
@for $i from 1 to $grid-columns {
  .grid-prefix-#{$i} { @include grid-prefix($i); }
}
@for $i from 1 to $grid-columns {
  .grid-suffix-#{$i} { @include grid-suffix($i); }
}
@for $i from 1 to $grid-columns {
  .grid-push-#{$i} { @include grid-push($i); }
}
@for $i from 1 to $grid-columns {
  .grid-pull-#{$i} { @include grid-pull($i); }
}

@each

@each指令形式:

@each $var in <list>

如果你没有接触过列表,也不要紧,他也非常简单,就是把2变成1。

在下面的例子中你可以看到,$var就是一个变量名,<list>是一个SassScript表达式,他将返回一个列表值。变量$var会在列表中做遍历,并且遍历出与$var对应的样式块。

这有一个@each指令的简单示例:

$list: adam john wynn mason kuroir;

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

编译出CSS:

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }

@while

@whild指令也需要SassScript表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为false时停止循环。这个和@for指令很相似,只要@while后面的条件为true就会执行。

这里有一个@while指令的简单用例:

$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

编译出CSS:

.while-4 {
  width: 24px; }

.while-3 {
  width: 23px; }

.while-2 {
  width: 22px; }

.while-1 {
  width: 21px; }

结论

正如你所看到的,Sass指令可以在你的@mixin或者@function中添加循环遍历,条件判断功能,这样可以帮助你创建一个真正强大的库。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

英文原文:http://thesassway.com/intermediate/if-for-each-while

中文译文:http://www.w3cplus.com/preprocessor/Sass-control-directives-if-for-each-while.html

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/Sass-control-directives-if-for-each-while.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部