Sass预处理器(2)

if条件语句

Sass可以根据条件判断给出特定的样式

语法

@if 条件语句 {
} @ else if 条件语句 {
} @else

如下：

// .scss文件
.box {
    @if 1+1 == 2 {
        color: red;
    } @else if 1+1 == 3 {
        color: blud;
    } @else {
        color: pink;
    }
}
--------------------------------------

// 生成的css代码
.box {
  color: red;
}

for循环

Sass也支持for循环，有两种语法。

语法1：

@for $index from 开始值 through 结束值 {
}
从开始值开始，到结束值结束，包含结束值  index表示 1， 2，...结束值

示例如下：

// .scss文件
@for $i from 1 through 5 {
    .col-#{$i} {
        width: 50px * $i;
    }
}
--------------------------------------

// 生成的css代码