リハビリも兼ねての。

はじめまして、のらりと申します。とある地方の企業のWeb担をしています。

Web担と言っても特別に予算がつくわけでもなく、無料で利用できるサービスを使いながらまぁまぁな見た目のWebページを作っているあるある。（パート勤務なので時給もお察し）

巷ではコロナ第七波ですね。

私が勤務している企業でも検索される回数が増えました。

FontAwesomeのFreeで使ってるKitsがアクセス過多でゲージが真っ赤になってました。

このままだと有料よ？と怒られましたが無料以外は許されないのよ…ああ…。

で、まぁKitsを使わない方向でソースを書き換えるんですが。具体的にはDLしてサイト内に設置するという。

ここで、ちょっとだけ問題が。

cssの作成にsassを利用してますが、FontAwesomeのsassを入れてもエラーがでる…。
理由は分かっていて。例えばこれ。fontawesome.scssだと

@import 'functions';
@import 'variables';
@import 'mixins';
@import 'core';
@import 'sizing';

と書いてある。この書き方は古い書き方で、Dart-Sassだと@importは@forwardで読込む（CSSの@importと区別するため）と思うの。
このファイルをコンテンツ毎のsassに読み込むときは@useで読込む。

@use 'fontawesome as f;

これでfontawesome.scss内で定義している変数などを各sassファイルで使えるようになるわけだが。（as f とか書くことで元ファイルの定義を簡単にしてます）

だが。

頭悪いせいか必要そうな箇所直しても直してもコンパイラでエラーでるのよねー。
html中にタグで仕込むわけじゃなくて、before/afterで追加するせいか。
さーっぱりわかんね（鼻ほじ

結局font-faceで定義してbefore/afterさせるという力業。おもいくそ負けてる気分。

頭の良い方に解説ページ書いて欲しいの、ほんとに…。
それかDart-Sassに対応してくれ、FontAwesome。

---

こんな感じで。文章を書くリハビリを兼ねてのnoteです。