Coding Memos

try {coding} catch {questions}

sassの連想配列とfont-awesomeのUnicodeの記述

ちょっとハマったので、メモとして。

<ul>
  <li class="list-red"></li>
  <li class="list-blue"></li>
  <li class="list-yellow"></li>
</ul>

上記のようなリストにおいて、個別にアイコンを入れたい場合、たとえば、wordpressなんかだと、テンプレートタグで 投稿ページや固定ページの一覧を吐出させることがある。

html要素にアイコン要素をかき入れられる場合は、問題ないのだが、 テンプレートタグだと、ループの制御に関わったりするので面倒。

そこで、cssの疑似要素::beforeや::afterによってアイコンを書き入れたい場合がある

//sassの連想配列
$list_items:(
  red:f015,
  blue:f232,
  yellow:115
);

として連想配列をつくっておく。redなどがkeyで、f015などはfont-awesomeのunicodeだが、valueという組み合わせである。

そこで、以下のように、sassで配列ループさせる

//sassの連想配列
$list_items:(
  red:f015,
  blue:f232,
  yellow:115
);

@each $key, $value in $list_items {
  .list-#{$key} {
   position: relative;
    $::before {
       position: absolute;
       content: "#{$value}";
       font-family: FontAwesome;
  //他のプロパティは略
     }
  }
}

さて、これでは実は上手くいかない。

contentにうまく$valueの各値が入らず、escapeされてしまうため、アイコンが表示できずTofuが出てしまう。 なにやら、ASCiiコードが含まれる場合に、sassコンパイルすると文字化けしてしまうとか?

qiita.com

というわけで、sassのfunction機能を使ってやる。

sass functionで何ができるかは、いかの公式ドキュメントをみてほしい。

Module: Sass::Script::Functions — Sass Documentation

//sassの連想配列
$list_items:(
  red:f015,
  blue:f232,
  yellow:115
);



@function unicode($str) {
  @return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"")
}

//unicode(f015) -> "\f015" とでるようになる関数

@each $key, $value in $list_items {
  .list-#{$key} {
   position: relative;
    $::before {
       position: absolute;
       content: unicode($value); //content: "\f015"; などとコンパイルされる
       font-family: FontAwesome;
  //他のプロパティは略
     }
  }
}

とすることで、おもったとおりにコンパイルされる。

ちなみに、font-awesomeのunicodeの調べかたとしては、アイコン各ページの下に書かれている。

fontawesome.io

f:id:codingmemos:20161027161351p:plain