Sass中@for指令

最新推荐文章于 2024-08-23 08:22:51 发布

longzhoufeng

最新推荐文章于 2024-08-23 08:22:51 发布

阅读量1.4k

点赞数

分类专栏： Sass

本文链接：https://blog.csdn.net/longzhoufeng/article/details/72470120

版权

Sass 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

@for指令有两种形式。

第一种形式是：

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

从start开始循环，到end结束，非常简单明了

scss语法：

$picon-images: picon !default;
@for $i from 1 through 5 {
    .#{$picon-images}#{$i}{
        background: url("icon/#{$i}.png") no-repeat;
        vertical-align: top;
        *vertical-align: middle;
        width: 24px;
        height: 24px;
        line-height: 20px;
    }
}

编译后的CSS

.picon1 {
  background: url("icon/1.png") no-repeat;
  vertical-align: top;
  *vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 20px;
}

.picon2 {
  background: url("icon/2.png") no-repeat;
  vertical-align: top;
  *vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 20px;
}

.picon3 {
  background: url("icon/3.png") no-repeat;
  vertical-align: top;
  *vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 20px;
}

.picon4 {
  background: url("icon/4.png") no-repeat;
  vertical-align: top;
  *vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 20px;
}

.picon5 {
  background: url("icon/5.png") no-repeat;
  vertical-align: top;
  *vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 20px;
}

第二种形式是：

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

循环从start开始，一直遍历循环到end结束。这种形式的循环只要碰到end就会停止循环（将不会遍历end值）

scss语法：

$picon-images: picon !default;
@for $i from 1 to 5 {
    .#{$picon-images}#{$i}{
        background: url("icon/#{$i}.png") no-repeat;
        vertical-align: top;
        *vertical-align: middle;
        width: 24px;
        height: 24px;
        line-height: 20px;
    }
}

编译后的CSS

.picon1 {
  background: url("icon/1.png") no-repeat;
  vertical-align: top;
  *vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 20px;
}

.picon2 {
  background: url("icon/2.png") no-repeat;
  vertical-align: top;
  *vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 20px;
}

.picon3 {
  background: url("icon/3.png") no-repeat;
  vertical-align: top;
  *vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 20px;
}

.picon4 {
  background: url("icon/4.png") no-repeat;
  vertical-align: top;
  *vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 20px;
}