0

sassを使用して、どのようにスタイリングしますか

#box1 img, #anotherbox img { height: 80px }

？mixins唯一の方法を使用していますか？

4

1 に答える 1

3

1つの方法は、CSSで行ったのと同じようにセレクターをリストすることです。ただし、これらの要素は必ずしも相互に関連しているとは限らないため、これはSassyの方法ではありません。彼らはたまたまいくつかの共通のスタイルを共有しています。このようにそれらを一緒にリストすることは問題なく機能しますが、さらに追加するにつれて整理を維持するのが少し難しくなります。

#box1 img, #anotherbox img
  height: 80px

もちろん、一般化したい場合は、そのためにミックスインを使用できます。

=shorty
  height: 80px

#box1 img, #anotherbox img
  +shorty

しかし、それは同じことです。＃box1と#anotherboxは、ファイルの異なる部分に配置したいと考えています。いくつかの共通のスタイルを共有する必要がありますが、それらが属するボックスルールのグループで整理しておく方が理にかなっているので、それらを分割します。

=shorty
  height: 80px

#box1
  img
    +shorty

#anotherbox
  img
    +shorty

これはミックスインを2回呼び出すため、出力に重複が生じます。

#box1 img { height: 80px }
#anotherbox img { height: 80px }

これは、ミックスインにいくつかのルールが含まれている場合、または限られた数の場所で使用されている場合に完全に受け入れられます。（ミックスインがパラメーターに基づいて異なるスタイルルールを生成する場合、ミックスインは実際に独自のものになります。）

さて、これがミックスインを使ったブロックの周りの旅です。

@extendを使用してその重複を回避する方法は次のとおりです。

@extendのアイデアは、もともとニコールサリバンがCSSウィッシュリストのブログ投稿で提案したものです。これは、現在のプレーンCSSでの実装が考案され、その後すぐにSassに追加されたという非常に良いアイデアのように思われました。

スタイルルールで、一般的なクラスまたは他の多くのアイテムの基本スタイルとして使用することを目的としたパターンが記述されている場合は、@extendを検討する必要があります。

違いを理解するために、ミックスインは呼び出されるたびにスタイルを出力しますが、extendは代わりに、そのスタイルが使用されているすべてのセレクターのリストを作成し、それらを1つのスタイルブロックにアタッチします。

.thumb-size
  height: 80px

#box1
  img
    @extend .thumb-size

#anotherbox
  img
    @extend .thumb-size

生産：

.thumb-size, #box1 img, #anotherbox img { height: 80px }

基本スタイルクラス（.thumb-size）は、他に厳密に必要ない場合でも、出力に出力されます。しかし、それがセレクターの前に座っているときのセレクターのリストの目的を定義するので、これはとにかく好ましいと思います。

于 2010-06-20T02:45:10.810 に答える