码迷,mamicode.com
首页 > 其他好文 > 详细

Sass-@each

时间:2018-05-29 14:07:38      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:image   lis   each   样式   示例   返回   编译   roi   ack   

@each 循环就是去遍历一个列表,然后从列表中取出对应的值。

@each 循环指令的形式:

@each $var in <list>

如果你没有接触过列表,也不要紧,他也非常简单。

在下面的例子中你可以看到,$var 就是一个变量名,<list> 是一个 SassScript 表达式,他将返回一个列表值。变量 $var 会在列表中做遍历,并且遍历出与 $var 对应的样式块。

这有一个 @each 指令的简单示例:

$list: adam john wynn mason kuroir;//$list 就是一个列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

编译出 CSS:

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }
 

 

Sass-@each

标签:image   lis   each   样式   示例   返回   编译   roi   ack   

原文地址:https://www.cnblogs.com/qjuly/p/9104552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!