了解 Sass 的控制命令 - 文章教程

了解 Sass 的控制命令

发布于 2019-05-29 字数 4540 浏览 1299 评论 0

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,通过引用变量列表,@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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

1848719402

文江的微博,一个平凡的草根站长。

6 文章
1 评论
3933 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0