私の質問は、実際にはタイトルが言うよりも広いです。これは、私が自分のアイデアで問題に直面しているところですが、あらゆる種類の解決策を受け入れています. 私の全体的な目標を説明しましょう。
私は、CSS プリプロセッサーができることを気に入っています。私は OOCSS と SMACSS のアイデアが好きです。私はこれらすべてに慣れていません。私は自分の設計手法をアップグレードして、あらゆる世界の最高のものを何らかの方法で取り入れようとしています. 私は次のように機能する理論的な方法を持っています：
- セマンティックなクラス名やIDなどのみを使用してください
- 一般的なスタイル シートでモジュールまたはパターンを定義する
- 共通のスタイルシートから特定のページに関連するセマンティック セレクターにモジュールを @extend するページごとのスタイルシートを持つ
したがって、この：
/* modules.scss */
.ruddy {color: red}
.fullwidth {width: 100%; display: block;}
プラスこれ：
/* homepage.scss */
@import modules.sass
#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}
これになります：
/* homepage.css */
#intro, aside {color: red}
#intro, .thing {width: 100%; display: block;}
他の人がこれを行うのを必ずしも見たことはありませんが、私には良い考えのように思えました. 私の壮大な計画で私が遭遇している問題は、 @extend がインポートされたファイルから機能していないように見えることです。SOのどこか他の誰かが、それは不可能だと言いました。これは本当ですか？ミックスインが機能するようになりましたが、出力CSSのすべての属性が複製されるという問題があり、これは理想的ではないようです。
私は実際にはLESS（構文）の方が好きですが、現時点では拡張さえありません。ミックスインの非効率性について心配する必要はありませんか、それとも私が求めていることを達成する方法はありますか?
注: Prepros というツールを使用して sass を自動コンパイルしています。上記のようなコードをコンパイルしようとすると、次のようなエラーが発生します。
... \sass\home.scss の 11 行目の警告: "#intro" は @extend "ruddy" に失敗しました。セレクター「ruddy」が見つかりませんでした。
コードをmodule.scssからhomepage.scssにコピーするだけで、問題は解決します。