Re: [問題] 如何改成精簡的寫法

[SansWord (是妳)]

※ 引述《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 能不能過。

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 42.71.206.240
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1404929862.A.200.html
推 ponba:感謝～～雖然scss不支援，但或許也是另種選擇