4

変数名に応じて適応したコードブロックを作成できるミックスインを作成しようとしています。

$foo: #00A9EC;
@mixin menu-color($color) {
.color-#{$color} a.level2,
.color-#{$color} a.level2:visited {
    color: $color;
    &:hover {
        color: adjust-lightness($color, 10); }
    &:active {
        color: adjust-lightness($color, -10); } } }

@include menu-color($foo);

出力:

.color-foo a.level2,
.color-foo a.level2:visited {
    color: #00A9EC; }

.color-foo a.level2:hover,
.color-foo a.level2:visited:hover {
        color: #20C0FF; }

.color-foo a.level2:active,
.color-foo a.level2:visited:active {
        color: #0084B9; }
4

2 に答える 2

2

特定の色にちなんで CSS クラスに名前を付けるべきではありません。あなたはそれを後悔するでしょう。後で色を赤にしたい場合は、すべての html に戻ってクラスを変更する必要があると考えてください。

CSS を使用する理由は、マークアップにスタイル情報を埋め込む必要がないようにするためです。

データの表示方法ではなく、データを説明するセマンティック クラスを使用します。

$foo: #00A9EC;

@mixin menu-color($name, $color) {
.custom-#{$name} a.level2,
.custom-#{$name} a.level2:visited {
    color: $color;
    &:hover {
        color: adjust-lightness($color, 10); }
    &:active {
        color: adjust-lightness($color, -10); } } }

@include menu-color(profile, $foo);

そして、あなたの HTML で<div class="custom-profile">。

そうすれば、今から 2 年後に黒く下線を付けたい場合 (または何でも)、html を掘り下げて新しい '.underlined-and-black-color` クラスをすべてに追加する必要はありません。それらの要素。SCSS を 1 か所で変更するだけです。

于 2013-04-21T00:12:24.813 に答える