3

いくつかの一般的に使用されるスタイルで sass クラスを拡張するために、ミックスインを使用できることを知っています。反対に、クラスを使用してそれを行い、関連する html 要素に設定することができます。

  • では、なぜそれを使用する必要があるのでしょうか。
  • どのような場合に使用することをお勧めしますか?
  • それは何か利点がありますか？
  • それは標準と見なされますか？
4

3 に答える 3

3

常に同じ値をセレクターに適用したくない場合は、ミックスインを使用します。

たとえば、角を丸くしたい場合は、「radius」パラメータを受け入れる mixin を作成します。

=borderRadius($value)
  border-radius: $value
  -webkit-border-radius: $value
  -moz-border-radius: $value
  -o-border-radius: $value

次に、他の場所で次のことができます。

.selector1
  +borderRadius(5px)

.selector2
  +borderRadius(10px)

これは基本的にDRYです。Ti はコードの保守性を高めます。たとえば、Opera をサポートする必要がなくなったら、-o-border-radiusすべてのファイルを検索して複数の場所から削除するのではなく、1 つの場所で削除するだけです。

于 2013-01-29T09:17:32.730 に答える
1

ミックスインを使用すると、いくつかの利点があります。

1) クラスを使用するには、実際にはすべての html 要素をそのようなクラスでマークする必要があります (=不要なオーバーヘッドの作成)。mixin は既存のクラスの拡張であり、必要に応じて追加のクラスを作成することもできます。

2) ミックスインはパラメーターを受け取ることができるため、パラメーターを非常に動的で再利用可能にすることができます。複数のクラスが必要だった場合、パラメーター化された mixin が 1 つだけ必要です。(borderradii、色、透明度、フォントサイズなど):

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

* Sass-Doc の例

3) クラスには意味的な意味が必要です。ミックスインは、さまざまな場所で使用できるコードスニペットに似ている必要があります。

上で述べたこれらすべてのポイントの良い、より複雑な例は、pduersteler の mixin です。

于 2013-01-29T09:26:07.613 に答える
0

ミックスインの例として; 固定グリッド内にアイコンを持つスプライトがあるとします。アイコンはそれぞれ 32x32px で、そのスプライトに基づいて 32x32px と 16x16px の両方のアイコンを生成したいとします。そこで、ミックスインが非常に便利になります。

@mixin icon($name, $left, $top)
{
  &.#{$name}-16:not(.raw)
  {
    &:before
    {
        float: left;
        content: "";
        width: 16px;
        height: 16px;
        margin-right: 8px;

        background-size: 300px 300px;
        background-image: image_url('icons/sprite_gray.png');
        background-position: -#{$left * 16}px -#{$top * 16}px;
    }

    &:hover:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 1}px; }
    &.active:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 2}px; }
    &.active.contrast:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 3}px; }
  }

  &.#{$name}-16.raw
  {
    width: 16px;
    height: 16px;

    background-size: 300px 300px;
    background-image: image_url('icons/sprite_gray.png');
    background-position: -#{$left * 16}px -#{$top * 16}px;
  }

  &.#{$name}-32:not(.raw)
  {
    &:before
    {
        content: "";
        width: 32px;
        height: 32px;

        background-size: 600px 600px;
        background-image: image_url('icons/sprite_gray.png');
        background-position: -#{$left * 32}px -#{$top * 32}px;
    }

    &:hover:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 1}px; }
    &.active:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 2}px; }
    &.active.contrast:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 3}px; }
  }

  &.#{$name}-32.raw
  {
    display: inline-block;
    width: 32px;
    height: 32px;

    background-size: 600px 600px;
    background-image: image_url('icons/sprite_gray.png');
    background-position: -#{$left * 32}px -#{$top * 32}px;
  }

}

この mixin を使用すると、アイコンの名前と位置を指定して、次のようなスタイルを作成できます。

.icon { 
    @include icon(user, 1, 1);
    @include icon(role, 5, 1);
}

これによりuser-16, user-32, role-16, role-32、アイコンを実装するためのクラスが提供されます。

(この例では、:beforeを使用しない限り、コンテンツとして追加されます.raw)

于 2013-01-29T09:19:57.427 に答える