web-dev-qa-db-ja.com

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

私の質問は、実際にはタイトルが言うよりも広いです。これは私が私の考えにぶつかっているところですが、私はあらゆる種類の解決策を受け入れています。私の全体的な目標を説明しましょう。

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」は「ruddy」を@extendできませんでした。セレクター「ruddy」が見つかりませんでした。

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

csssassoocsscss-preprocessor
13
Moss

問題はここにあります：

#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;}
10
cimmanon

それは本当ではない。

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

例：

foo.sass

%foo
  color: red

bar.sass

@import foo.sass
html
  @extend %foo

sass bar.sass bar.cssを実行します。

bar.cssが表示されます

html {
  color: red; }

PS実際のSASSエクスペリエンスでは、 Compass を活用する必要があります。コンパスは1つの名前でたくさんのものです：

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

[〜＃〜] upd [〜＃〜]最後にエラーテキスト！

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

9
Andrey Mikhaylov - lolmaus