@forwordに移行するメモアフィリエイト広告を利用しています。CSShttps://blog.emwai.jp/css/sass20210827/最近、CSSの自作のライブラリ(のようなもの)を更新しようと思っていろいろ調べていたら、近い将来にSassの@importが使えなくなることを今更ながらに知りました。世捨て人の私にとっては寝耳に水です。前置き新しいモジュールシステムなど詳しい説明は他のプロにまかせるとして、とりあえず@importを新しく@useや@forwordに書き換えるだけではダメなんじゃいってことでググっているうちにいろいろ知識は得ることはできたけど、具体的な解決策がまだまだ少ないなと感じました。シフトブレイン/スタンダードデザインユニット@importの廃止について要約すると、これまでの@importが、読み込んだファイルの変数やミックスインすべてがグローバルな状態(読み込んだ後に別ファイルでいくらでも書き換えられてしまうもの)だったのに対し、@useではファイルの内容がカプセル化され、読み込み先では名前空間(ネームスペース)を使って参照する必要がある、といった大きな違いがあります。20年前のPerlのCGIみたいにグローバルな変数のままでは危なっかしいのでやめましょうってことですね。Sassか、とかバージョンがどうか、という環境周りの面倒なことは一切考えないようにしています。そのへんのツッコミはご遠慮ください。@useで読み込んだモジュールの内容は名前空間を追加して参照します。よって違う名前空間にしたり、アスタリスクでなしにすることもできます。mixin.bg-color();}アスタリスクで名前空間をなくしてもこれまでの@importと同じようには動作しません。上の例であれば、2行目で読み込んだmixins.scssは、1行目のvariables.scssの中身を参照できないので、改めて変数ファイルをロードする必要があります。var.$body-bg-color;}で、Bootstrapであれ自作であれ、ライブラリやフレームワークのデフォルト変数(!default付き)をプロジェクトごとに上書きして使うなんてときのために使えるのがwithで、配列で変数を渡してデフォルト変数を変更することができます。#eee);...ただ、たいていの場合これだけでは解決策にならないです。海外のフォーラムでも見かけましたが、後で読み込んだ別ファイルにはwithで変更した値が反映されないし、変数の数が多ければ大変過ぎます。「野郎ども!ベストプラクティスよこせ!」と、しばらく調べたり考えたり寝っ転がったりした結果、思いついた方法が下記です。withを使う以下のようなファイル構成を想定します。includes/には、モジュールとして利用するファイルを、includes/library/には他でも使い回すファイル群(以下、ライブラリ)を入れています。....ライブラリのデフォルト変数は、プロジェクト用の変数(includes/variables.scss)で上書きします。これまでなら以下のように@importしてやれば変数を上書きして利用することができました。!default;ライブラリはプロジェクトによる変数の上書きがあるかどうかを問わないので、ライブラリ内のモジュールではデフォルト変数のファイルだけを読み込んで上書きに対応させないといけません。~による上書きは記述したファイルでしか有効にならず、重複させることもできないのでデフォルト変数の読み込みに利用できません。~を使ったらうまく行きました。!default;この方法であれば、下のようにライブラリ内のモジュールでデフォルト変数のファイルを読み込んでも、プロジェクトによる上書きがうまく反映されるようになりました。}}それと、名前空間付きで使用するミックスインはmixin-existsで存在のチェックができなくなります。モジュールのミックスインが定義済みかどうか調べるには組込モジュールのsass:metaが必要なようです。ライブラリの中では@forwordばっかり使ってればいいじゃないかと思ってたらそうはいきません。下記のようにライブラリの中で、読み込んだ先のミックスインを展開(@include)するにはやっぱり@useしないといけません。}}プロジェクトの変数ファイルがもう一つあったらライブラリの変数を上書きする話に戻すと、複数のファイルを使って上書きを繰り返したい場合があります。ライブラリ変数(優先順)」といった感じに。試した結果、最終的にライブラリの変数を上書きするまでそれぞれのプライベートな変数をとり扱うことで対処できました。$network-body-bg-color,);ここまでで、これまで使っていた構成をだいぶカバーできるようになってきました。変数をマップにまとめてアクセサを作れないかこちらはまた別の方法。実は、最初に思いついたのはこちらでした。カプセル化と謳っているのだから、プログラム言語のクラスやパッケージのようにプロパティのアクセサを作ってやればいいと思いました。結果的には今のところうまく動きません。たくさんの変数はマップにまとめて、外部からはゲッター(プロパティ取得)とセッター(上書き)を介してアクセスできるようにすればええではないか。海外のフォーラムでも同じような案をみつけました。Overflow下記のようなものを実際に試してみるとマップの上書き(組込モジュールのsass:mapを使ったmap.set)の方がうまく機能しませんでした。ゲッターは機能しますが、セッターが機能せず使い物になりません(map-setでも同じ)。元のマップは上書きされていない}関数set-colorの中で代入した変数$colorsはレキシカル変数なんでしょうか。Sassってよくわかりません。いっちょ前にカプセル化とか言うんならデフォルト変数の書き換えに対して効率的な代替案が提示されてほしいです。アクセサがうまく機能しさえすれば、カプセル化に対してはこちらの方がベターな方法ではないでしょうか。自作ライブラリとか総作り変えになっちゃってハッピーです。原因究明するほどこの問題にかまってられないのでこちらは保留にして終わりにします。Logic7で楽譜作成Logicでドラム譜・パーカッション譜を作成する時に必要なマップドインストゥルメントとマップドスコアスタイルについて。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれないコメントは無視されますのでご注意ください。このブログについてご覧いただきありがとうございます。このブログは、高知県でウェブデザイン・印刷物のデザイン制作を行っているフリーランス、森田秀章のブログです。