※ 引述《ponba (胖爸)》之铭言：
: @include icon("icon-library", "\e621", $pon-icon);
: @include icon("icon-calculate", "\e63a", $pon-icon);
: @include icon("icon-clock", "\e648", $pon-icon);
: @include icon("icon-bars", "\e698", $pon-icon);
: @include icon("icon-cog2", "\e690", $pon-icon);
: 上面是设定值，下面是想要变成的CSS
: .pon-icon-library:before {
: font-family: $pon-icon;
: content: "\e621";
: }
: 目前有想到的方式为
: @mixin pon-icon($icon){
: font-family: $pon-icon;
: content: $icon;
: }
: .pon-icon-library:before { @include pon-icon("\e621"); }
: 请问如何用类似循环或其它较精简的方式改写？
: 如果可用for-each直接把@include icon的值抓出来就好了。
: 谢谢
: ※ 编辑: ponba (220.132.131.252), 07/08/2014 22:22:54
: → mmis1000:scss? 07/08 22:59
: → superpai:参考 http://blog.sass-lang.com/posts/184094 看看 07/09 06:01
sass 在 3.3 之后开始支援 map
http://viget.com/extend/sass-maps-are-awesome
可参考这篇使用
: @include icon("icon-library", "\e621", $pon-icon);
: @include icon("icon-calculate", "\e63a", $pon-icon);
: @include icon("icon-clock", "\e648", $pon-icon);
: @include icon("icon-bars", "\e698", $pon-icon);
: @include icon("icon-cog2", "\e690", $pon-icon);
: .pon-icon-library:before {
: font-family: $pon-icon;
: content: "\e621";
: }
$map: ("icon-library": "\e621", "icon-calculate": "\e63a",
"icon-clock": "\e648", "icon-bars": "\e698", "icon-cog2": "\e690");
// 实际上不能换行，要整个写在一起，这边是为了让您易读
@each $type, $content in $map {
.pon-#{$type}:before {
font-family: $pon-icon;
content: $content;
}
}
大概像这样，我习惯上是写 sass, 你看一下这样 scss 能不能过。