tl:dr バージョン:すべての CSS クラスを %placeholder クラスに変更せずに、CSS クラスを @extend し、元のクラスがコンパイル済み CSS に表示されないようにする方法はありますか?
以下の回答に基づく短い回答: css をサイレント/プレースホルダー クラスに変換しない限り、これを行う方法はないようです。たとえば、.one{} を %one{} に変換し、それでもメディアに問題が発生しますクエリ。
フォームやボタンなどのさまざまな要素のスタイルを設定する 200 以上の CSS クラスを含む css ファイル (「style.css」と呼びましょう) があります。これらのクラスの一部をプロジェクトに含め、そのファイルの他のクラスを含める必要があります。他のランダムなプロジェクト/ウェブサイトで。新しいプロジェクトごとに、私が選んだランダムなセマンティック クラス名もクラスに付けたいと考えています。
CSS を扱うときに私が選んだプリプロセッサは SCSS であり、SCSS の力を利用する答えが本当に必要です。
これは私が話していることの簡単な例です - css を SCSS ファイルにロードし、その css を独自のクラス名で拡張します:
//style.css
.one {
color: red;
padding-top: 1px;
}
//style2.scss
@import "style.css";
.two {
@extend .one;
}
ここでの問題は、私の SCSS ファイルが CSS にコンパイルされ、次のようになることです。
//style2.css
.one {
color: red;
padding-top: 1px;
}
.two {
color: red;
padding-top: 1px;
}
しかし、私がやりたいのは、特別な名前を付けた 2 番目のクラスだけを含めることです。
私はこれを行ういくつかの方法を試しましたが、これはうまくいかない例の1つですが、私ができるはずだと思っていたことの線に沿っています:
A.) まず、style.css ファイルを取得し、それをコピーして style.scss ファイルに貼り付けます。
B.) 次に、すべてをプレースホルダー/サイレント クラスにラップします。次のようにします。
//style.scss
%placeholder {
.one {
color: red;
padding-top: 1px;
}
}
C.) 次に、その SCSS ファイルをインポートし、次のように、プレースホルダー内にある選択したクラスを拡張しようとします。
//style2.scss
@import "style";
.two {
@extend .one;
}
これをコンパイルしようとすると、空白のcssファイルが得られます（そして、トリッキーになりすぎたために当然のことです）。私が知っているもう1つのことは、ネストされたセレクターを拡張できないため、「@extend %placeholder .one;」ということです。も論外です。
私の質問はこれです:コンパイルされた結果にインポートされたcssが含まれないように、cssクラスをインポートしてから拡張する方法を知っている人はいますか?
私が考えることができる他の唯一の解決策は、インポートしたcssをファイルの先頭から削除してから、野生に出すことです。しかし、これは正直なところ、理想的なソリューションとは言えません。
事前に回答ありがとうございます:)