別のsassファイルから@extendする方法、またはOOSASSを達成する方法は？

Question

私の質問は、タイトルよりも実際に広いです。これはちょうど私が私のアイデアで悩まされている場所ですが、私はあらゆる種類のソリューションに開放されています。私の全体的な目標について説明しましょう。

私は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の他の誰かが、それは不可能だと言った。これは本当ですか？私はmixinsを稼働させましたが、それらの問題は、出力CSSのすべての属性を複製することです。これは理想的ではないようです。

私は実際にはLESS（構文）よりも部分的ですが、現時点では拡張していません。私はミックスインの非効率性を心配してはいけませんか、私が求めていることを達成するための方法がありますか？

注： 私はPreprosというツールで自分の草を自動コンパイルしています。上記のようなコードをコンパイルしようとすると、次のようなエラーが出ます。

... \ sass \ home.scssの11行目で警告： "#intro"は "ruddy"を@extendできませんでした。 セレクタ「ruddy」が見つかりませんでした。

私はmodule.scssからhomepage.scssにコードをコピーするだけで、問題は解決します。

Answer 1

問題はここにある：

#intro {@extend ruddy; @extend fullwidth} 
aside {@extend ruddy;} 
.thing {@extend fullwidth;} 

ruddyとfullwidthは、セレクタではありません。 .ruddyクラスを拡張する場合は、その期間をセレクタの一部として含める必要があります。

#intro {@extend .ruddy; @extend .fullwidth} 
aside {@extend .ruddy;} 
.thing {@extend .fullwidth;} 

Answer 2

これは正しくありません。

クラス（%-prefixed onesを含む）を1つのファイルに宣言し、最初のファイルを2番目のファイルにインポートし、2番目のファイルでクラスを拡張することができます。

例：

foo.sass

%foo 
    color: red 

バー。SASS

@import foo.sass 
html 
    @extend %foo 

実行sass bar.sass bar.css。

bar.cssが本当のSASSの経験のため

html { 
    color: red; } 

PSを表示され、あなたはCompassを活用すべきです。コンパスは1つの名前の下にあるものの束です：

• SASSを効率的にコンパイルするための便利なツールです。
• すべての機会に便利なSASSスタイルの巨大なライブラリ。
• あなたのプロジェクトに簡単にインストールして使用できる拡張機能のエコシステム。これがSASSを目立たせる理由です。あなたは車輪を何度も何度も再開発する必要はありません。

UPD最後にエラーテキスト！

あなたはクラスの名前にドットがありません。 aside {@extend ruddy;}はaside {@extend .ruddy;}である必要があります。