Sass流程控制@for循环
最编程
2024-07-29 12:38:48
...
接触过Boostrap的小伙伴,估计都见过.col1~.col12这样的样式。在CSS中,对于这种样式我们一般都需要一个一个地书写。但是在Sass中,我们可以使用@for循环来实现。
在Sass中,我们可以使用“@for”来实现循环操作。其中,Sass中的@for循环有2种方式。
语法:
方式1:@for $i from 开始值 through 结束值
方式2:@for $i from 开始值 to 结束值
说明:
这2种方式是相似的,唯一的区别是:方式1包括结束值,方式2不包括结束值。其中“开始值”和“结束值”都是正整数。
举例1:
@for $i from 1 through 3
{
.item-#{$i}
{
width:(20px * $i);
}
}
编译出来的CSS代码如下:
.item-1
{
width:20px;
}
.item-2
{
width:40px;
}
.item-3
{
width:60px;
}
分析:
如果将“@for $i from 1 through 3”改为“@for $i from 1 to 3”,则编译出来的CSS代码如下:
.item-1
{
width:20px;
}
.item-2
{
width:40px;
}
举例2:
@for $i from 1 through 3
{
.border-#{$i}
{
border:#{$i}px solid red;
}
}
编译出来的CSS代码如下:
.border-1
{
border: 1px solid red;
}
.border-2
{
border: 2px solid red;
}
.border-3
{
border: 3px solid red;
}
分析:
如果小伙伴们忘了“插值#{}”的用法,记得回去翻翻“Sass插值”这一节。
下一篇: 第四章:特别设计的语句(虚拟情境)