0

最近Sassを使うときは、変数の代わりにクラスを拡張しています。

例えば：

-変数の使用

$small-font: 12px

p {
font-size: $small-font
}

・クラスの延長

.small-font {
font-size:12px;
}

p {
@extend .small-font;
}

クラスを拡張する利点は、コードをレスポンシブにするのが簡単になることです。たとえば .small-font、変数では不可能なメディア クエリをラップできます。

私の質問は次のとおりです。このように拡張クラスを使用することに不利な点はありますか? 出力がすべてのクラスをひとまとめにする傾向があることは知っていますが (これにより、デバッグがより面倒になる可能性があります)、他に潜在的な問題はありますか?

4

1 に答える 1

6

いくつかの問題があります。1つは、単にそれの狂気の滑りやすい坂の性質です。これは、メンテナンスの問題としてあなたを噛むために戻ってきます。プロパティごとのクラスは、コード編成スキームとしては意味がありません。それはあなたが遠く離れているという意味ではありません-@extendは、当然のことながら、このようなものに最適です。

理由が重要です。グループ化はグループ化として意味をなす必要があります。@extendsではhtmlスタイルのコンテンツセマンティクスは重要ではありませんが、それでもセマンティックな編成の感覚が必要です。このために「視覚的意味論」という用語が浮かんでいるのを見てきました。ネーミングは、効果を説明するだけでなく、その代わりに視覚的な理由を説明する必要があります。％yellowではなく、％highlight-textです。％redではなく、％warning。何ではなく、なぜ。

もう1つの問題はカスケードです。出力コードの順序は、カスケード（CSSの重要な部分）に影響を与えるため、非常に重要です。このアプローチでは、コードの順序の制御をあきらめているため、定期的にカスケードと戦うことになります。@extendは、幅広く単純なデフォルトのグループ化には最適ですが、カスケードオーバーライドには適していません。

于 2012-09-08T01:09:05.407 に答える