【SASS】＠mixinの引数にcontentの内容を指定したい

Question

みなさまこんにちは。

Sassを始めたばかりなので分からない事が多く、質問文も拙いですが良ければご回答頂けると幸いです。

目的

サイト内で使用するFont Awesome 5 FreeのWebアイコンでよく使うcssプロパティを＠mixinで定義し、他のscssファイルで呼び出して引数の部分にcontentの内容を入れる、という構造を作りたいと思っています。

今現在のコード

//common.scss

@mixin fontAwesome($code) {
    content: "" + $code;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

上記のscssファイルで定義した@mixinを下記の別のファイルで呼び出しています。

//main.scss

.test {

&::after {
    @include fontAwesome(\f138);
}

}

このコードですと一応エラーは出ないのですがコンパイルすると…

//main.css

.test::after {
   content: "\f138";
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
}

こうなってしまうのです。

もしこれの解決法をご存知の方がいましたら教えて頂けると幸いです。

また、他にwebアイコンの上手い使いまわし方法があるよという方も、教えて頂けると有難い所存です！

コード初心者の勉強不足で申し訳ないのですが、よろしくお願いいたします。

Answer 1

@mixin fontAwesome($code) {
  content: #{'"' + $code + '"'};
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

contentプロパティの部分を上記のようにするとよいです。

.test {
  &::after {
    @include fontAwesome('\f138');
  }
}

ただし、明示的に文字列 '\f138' として引数に渡すと正しく動作しないので注意してください。

Comments

[kinokomochi]

ご回答ありがとうございます！
この方法を試させていただきましたところ、思い通りの動きになりました！
補完は使ってみてはいたのですが、なかなかうまく行かず…
組み合わせるにはこういった書き方をするんですね！
本当にありがとうございます。もっと勉強します！

Answer 2

文字列に変換するときにエスケープが入っているんじゃないかな。
こちらの記事達が参考になりそうです。ご参考までに????

sassでバックスラッシュ(円マーク)が二つ出力されてしまう

gulp-ruby-sassでfont-awesomeをコンパイルしたら文字化けした件

Comments

[kinokomochi]

ご回答ありがとうございます！
わざわざ参考のURLまで添付していただいて、感謝です。。
是非とも参考にさせていただきます！