css - SCSS 構造と複数の CSS クラス

Question

初めて SCSS を使い始めたばかりです。結果として得られる CSS は、手動で記述した場合よりも最適化されていないことに気付きました。たとえば、次のように、スタイルの複製にミックスインを使用しています。

@mixin button {
    border-radius: 4px 20px 20px 4px;
    -moz-border-radius: 4px 20px 20px 4px;
}
.enquire {
    .live-chat {
        @include button;
        background: #21a649;
    }
    .enquire-now {
        @include button;
        background: #33b1ff;
    }
}

次に、ボタンに必要なのは「enquire-now」という単一のクラスだけで、すべてのスタイルが CSS のその 1 つのクラスに含まれています。

ただし、これを手で書いていたら、次のように 2 つのクラスを使用していたでしょう。

.button {
    border-radius: 4px 20px 20px 4px;
    -moz-border-radius: 4px 20px 20px 4px;
}
.enquire .live-chat {
    background: #21a649;
}
.enquire .enquire-now {
    background: #33b1ff;
}

そして、要素で、「今すぐ問い合わせるボタン」を使用しました

そのため、mixin を使用することで、HTML で使用するクラスを最小限に抑えて書きやすくしていますが、実際の CSS ファイルはずっと長くなります! これはやや逆効果に思えます...何か見逃したことがありますか?

昔ながらの方法で実際に小さい CSS ファイルを生成する場合、ミックスインのポイントは何ですか?

Answer 1

ディレクティブを使用して、@extendコードの保守を容易にし、スタイルの重複を防ぎます。

%button {
    border-radius: 4px 20px 20px 4px;
    -moz-border-radius: 4px 20px 20px 4px;
}
.enquire {
    .live-chat {
        @extend %button;
        background: #21a649;
    }
    .enquire-now {
        @extend %button;
        background: #33b1ff;
    }
}

これにコンパイルされます：

.enquire .live-chat, .enquire .enquire-now {
border-radius: 4px 20px 20px 4px;
-moz-border-radius: 4px 20px 20px 4px;
}
.enquire .live-chat {
background: #21a649;
}
.enquire .enquire-now {
background: #33b1ff;
}

Answer 2

そのトレードオフ。より冗長になる代わりに、より簡単に作成でき、より保守しやすい CSS が得られます。そして、最近わか​​ったように、IE には、単一の CSS ファイルに特定の数を超えるセレクターを含めることができず、CSS ファイルの数にも制限があるという厄介なことがあります。そのため、大規模なサイトの場合、セレクターのカウントを下げることは、ファイルのサイズよりも重要ではないかもしれません. 特に、縮小してから圧縮 (gzip 圧縮) バージョンを提供することで、ファイルサイズの問題を軽減できるためです。

Answer 3

実際@extendに代わりに使用してください: Sass Extend Reference