了解Sass的控制命令

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

本文由大漠根据Scott O’Hara的《Getting into Sass Control Directives》一文所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出:http://flippinawesome.org/2014/03/03/getting-into-sass-control-directives

——作者:Scott O’Hara

——译者:大漠

Sass使用@extend@mixin可以很容易编写出精简的CSS。但也许你不太清楚,如何使用Sass的控制命令帮助您更好的编写精简Sass。

使用@if@for@each@while控制命令,可以让你的Sass在编写重复样式和条件逻辑时起到非常关键的作用。

@if指令的应用

在一些样式场景之下,使用@if控制命令非常有用。基本上Sass会检查@if命令,如何@if条件为真,将会编译出CSS,如果条件为假,不会编译出CSS。或者你设置一个@else命令,将会编译出另一套样式规则。

下面是一个简单的例子:

// 带有`@if`指令的Mixin

@mixin left-or-right($lr) {
  position: absolute;
  top: 0;

  // 声明向左或向右
  @if $lr == left {
    left: 20px;
  }

  @else if $lr == right {
    right: 20px;
  }
}

在上面的@mixin中,通过@if控制指令根据$lr的取值输出不同的CSS规则。

// Mixin应用:

.class-name {
  @include left-or-right(left);
}

在这个示例中,设置了$lr的值为left,将编译出与面的样式:

.class-name {
  position: absolute;
  top: 0;
  left: 20px;
}

@for指令的应用

@for命令中基本上有一个起点和一个终点。你可以通过@for指令实现从起点到终点的一个循环。

从起到到终点实现一个循环。让我们来看一个示例,更好的描述@for循环:

// 输出 .txt-h1 - 6
@for $i from 1 through 6 {
  .txt-h#{$i} {
    @extend %txt-h#{$i};
  }
}

在上面的示例中,通过@for循环指令,生成了.txt-h1.txt-h6类名,并在对应的类名是设置各自的字号。

生成的CSS如下:

.txt-h1 { ... }
.txt-h2 { ... }
.txt-h3 { ... }
.txt-h4 { ... }
.txt-h5 { ... }
.txt-h6 { ... }

在这个示例的基础上我们扩展一下。

@for $i from 1 through 6 {
    %txt-h#{$i}{
        font-size: 3em / $i;
    }
}

@for $i from 1 through 6 {
  .txt-h#{$i} {
    @extend %txt-h#{$i};
  }
}

输出的CSS如下:

.txt-h1 {
  font-size: 3em; }

.txt-h2 {
  font-size: 1.5em; }

.txt-h3 {
  font-size: 1em; }

.txt-h4 {
  font-size: 0.75em; }

.txt-h5 {
  font-size: 0.6em; }

.txt-h6 {
  font-size: 0.5em; }

如果你修改through的值,将会输出不同的样式:

.txt-h1 { ... }
.txt-h2 { ... }
.txt-h3 { ... }
.txt-h4 { ... }
.txt-h5 { ... }

每种@for指令都有其使用情况,你只要确保你记住了输出的指令。

@each指令的应用

@each循环是通过遍历变量的列表,生成不同的CSS。如果你不熟悉Sass的列表,你可以阅读Hugo Giraudel的文章——这里介绍的很详细。

如果你阅读英文吃力,建议你阅读《理解Sass的list》一文,可以帮助你理解Sass中的列表。——@大漠

通过引用变量列表,@each指令可以根据列表中的变量生成指定的代码。

一个简单的示例,实现了文本对齐的方式:

$align-list: center, left, right;

@each $align in $align-list {
  .txt-#{$align} {
    text-align: $align;
  }
}

在这里设置了一个类名和对齐方式值的变量列表。然后通过@each指令,和一个新的变量$align,并且在$align-list变量列表中遍历,直到遍历完成。

上面的SCSS将编译出的CSS如下:

.txt-center {
  text-align: center;
}

.txt-left {
  text-align: left;
}

.txt-right {
  text-align: right;
}

@while指令的应用

@while指令工作类似于@for指令。不同的是列表值替代了@for语句中的through值,@while指令将遍历运行,直到值返回是false,终止运行。

下面通过@while指令给button设置不同的大小的一个示例:

$btn-sizes: 6;
$btn-padding: 4px;

@while $btn-sizes > 0 {
  .btn-pad-#{$btn-sizes / 2} {
    padding: $btn-padding + $btn-sizes $btn-padding * $btn-sizes;
  }
  $btn-sizes: $btn-sizes - 2;
}

编译出来的CSS如下:

.btn-pad-3 {
  padding: 10px 24px;
}

.btn-pad-2 {
  padding: 8px 16px;
}

.btn-pad-1 {
  padding: 6px 8px;
}

结论

这里所有指令的示例都非常的简单,但是希望他们能说明如何使用这些指令帮助你编写精简的CSS。如果你是第一次接触这些指令,我强烈建议你执行这些示例,更好的帮助你了解这些Sass指令。这样你也可以熟悉如何使用这些指令编译自己代码,从而编写出更精简的代码。实现更强的功能。

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

如需转载烦请注明出处:

英文原文:http://flippinawesome.org/2014/03/03/getting-into-sass-control-directives

中文译文:http://www.w3cplus.com/preprocessor/getting-into-sass-control-directives.html

Air Jordan IV 4 Retro Pinnacle Croc Pony Hair

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/getting-into-sass-control-directives.html

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

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