Scss--控制指令(@if, @for, @each, @while)--使用/实例

Scss--控制指令(@if, @for, @each, @while)--使用/实例

简介

本文介绍Scss的控制指令的用法，包括：@if, @for, @each, @while。

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

@if

说明

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

简单示例

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

编译后的CSS：

p { border: 1px solid; }

复杂示例

SCSS：

$type: monster;p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; }}

编译为

p { color: green; }

@for

说明

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

示例

SCSS：

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

编译后的CSS：

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

@each

说明

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

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

示例

SCSS：

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

编译后的CSS：

.puma-icon { background-image: url('/images/puma.png'); }.sea-slug-icon { background-image: url('/images/sea-slug.png'); }.egret-icon { background-image: url('/images/egret.png'); }.salamander-icon { background-image: url('/images/salamander.png'); }

@while

说明

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

示例

SCSS：

$i: 6;@while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2;}

编译后的CSS：

.item-6 { width: 12em; }.item-4 { width: 8em; }.item-2 { width: 4em; }

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。