Sass/Scss 学习总结(五) 之 控制指令

SassScript 支持一些基本控制指令和表达式,比如判断、循环。控制指令是一项高级功能,日常编写过程中并不常用到,主要在 mixins(混合器) 和 函数 中使用。


if()

内置的 if() 函数可以让您判断一个条件表达式,是否为 true,如果为 true,则返回一部分,如果为 false ,则返回另一部分。


语法

if($condition, $if-true, $if-false)


参数说明

$condition:条件表达式

$if-tue:如果条件表达式,返回的是 true,则整个 if() 函数,返回 $if-ture

$if-false:如果条件表达式,返回是 false,则整个 if() 函数,返回 $if-false


实例

// b.scss 文件
// -------------------------------------------

$width: 100px;

div {
	width: if($width > 100, 110px, 90px);
}



// 编译后的 b.css 文件
// -------------------------------------------

div {
    width: 90px;
}


@if

@if 指令需要一个 SassScript 表达和嵌套在它下面要使用的样式,如果表达返回值不为 false 或者 null,那么后面花括号中的内容就会返回。


语法

@if 条件表达式 { 返回值; }


实例

// b.scss 文件
// -------------------------------------------

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


// 编译后的 b.css 文件
// -------------------------------------------

p {
    border: 1px solid; 
}

@if 语句后面可以跟多个 @else if 语句和一个 @else 语句。如果 @if 语句失败, Sass 将逐条尝试 @else if 语句,直到有一个成功,如果全部失败,那么会执行 @else 语句,例如:

// b.scss 文件
// -------------------------------------------

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


// 编译后的 b.css 文件
// -------------------------------------------

p {
    color: green;
}




@for

@for 指令重复输出一组样式,对于每次重复,计数器变量用于调整输出结果。该指令有两种形式

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

注意关键字 through 和 to 的区别。$var 可以是任何变量名,比如 $i; <start> 和 <end>是应该返回整数的 SassScript 表达式。当 <start> 比 <end> 大的时候,计数器将递减,而不是增量。

@for 语句将设置 $var 为指定的范围内每个连续的数值,并且每一次输出的嵌套样式中使用 $var 的值。对于 from ... through 的形式,范围包括 <start> 和 <end> 的值,但 from ... to 的形式从 <start> 开始运行,但不包括 <end> 的值。


实例1

// b.scss 文件
// -------------------------------------------

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


// 编译后的 b.css 文件
// -------------------------------------------

.item-1 {
    width: 2em;
}

.item-2 {
    width: 4em;
}

.item-3 {
    width: 6em;
}


实例2

// b.scss 文件
// -------------------------------------------

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


// 编译后的 b.css 文件
// -------------------------------------------

.item-1 {
    width: 2em;
}

.item-2 {
    width: 4em;
}



@each

@each 指令可以循环输出列表(list)和 map 中的每个项目,输出格式中包含使用 $var 的值。


语法

@each $var in <list or map>


参数说明

$var 可以是任何变量名,像 $length 或者 $name

<list or map> 是一个返回列表(list)或 map 的 SassScrip 表达式。


实例

// b.scss 文件
// -------------------------------------------

$list: puma sea-slug egret salamander;

@each $animal in $list {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
    }
}



// 编译后的 b.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");
}


@each 指令也可以使用多个变量,格式为:

@each $var1,$var2, ... in <list>

注意:<list> 是列表(list)中的列表,如果是单列表,在编译时会发出警告。子列表中的每个元素被分配给各自的变量。

// b.scss 文件
// -------------------------------------------

$list: (puma, black, default), (sea-slug, blue, pointer), (egret, white, move);

@each $animal, $color, $cursor in $list {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
        border: 2px solid $color;
        cursor: $cursor;
    }
}


// 编译后的 b.css 文件
// -------------------------------------------

.puma-icon {
    background-image: url("/images/puma.png");
    border: 2px solid black;
    cursor: default;
}

.sea-slug-icon {
    background-image: url("/images/sea-slug.png");
    border: 2px solid blue;
    cursor: pointer;
}

.egret-icon {
    background-image: url("/images/egret.png");
    border: 2px solid white;
    cursor: move;
}

因为 maps 被视为键值对的列表,所以多重赋值也可以很好的工作。例如:

// b.scss 文件
// -------------------------------------------

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


// 编译后的 b.css 文件
// -------------------------------------------

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.2em;
}


@while

@while 指令重复输出嵌套样式,直到SassScript表达式返回结果为 false。这可用于实现比 @for 语句更复杂的循环,只是很少会用到。


语法

@while 条件表达式 { 操作项; }


实例

// b.scss 文件
// -------------------------------------------

$i: 10;

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

    $i: $i - 2;
}


// 编译后的 b.css 文件
// -------------------------------------------

.item-10 {
    width: 20em;
}

.item-8 {
    width: 16em;
}

.item-6 {
    width: 12em;
}

.item-4 {
    width: 8em;
}

.item-2 {
    width: 4em;
}

注意:对于这样的循环,一定不要在循环内设置 $i 的值,防治写成死循环。


未经允许不得转载:易读小屋  »  Sass/Scss 学习总结(五) 之 控制指令