SCSS @each

2019-2-6 11:46| 作者: admin| 查看: 241| 评论: 0|来自: 蚂蚁部落

@each和@for指令类似,同样可以用于循环输出。

但是@each指令一般用于对于list或者map的遍历输出。

相关阅读:

(1).list可以参阅scss list列表一章节。

(2).map可以参阅scss map对象一章节。

代码实例如下:

[Scss] 纯文本查看 复制代码
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译后的css代码如下:

[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"); 
}

下面再来看一个对于map遍历的代码:

[Scss] 纯文本查看 复制代码
$ppl: ( one:bob, two:john, three:bill, four:mike );
@each $key, $usr in $ppl  {
  .#{$usr}-avatar {
    background-image: url('/img/#{$usr}.png');
  }
}

编译后的css代码如下:

[CSS] 纯文本查看 复制代码
.bob-avatar {
  background-image: url("/img/bob.png"); 
}
.john-avatar {
  background-image: url("/img/john.png"); 
}
.bill-avatar {
  background-image: url("/img/bill.png"); 
}
.mike-avatar {
  background-image: url("/img/mike.png"); 
}

代码非常简单,本文不再进行过多介绍,如有疑问可以在文章底部留言。


鲜花

握手

雷人

路过

鸡蛋
上一篇:SCSS 颜色值运算下一篇:SCSS list 列表

最新评论

返回顶部