0

mixinセレクター文字列を組み合わせることが可能かどうかを調べようとしています。私のコードのコンテキストではこれが可能だとは思いませんが、何かが欠けている可能性があります!

次のscssがあるとしましょう：

// Apply a set of rules to input form fields.
@mixin input-form-fields {
    input:not([type="hidden"]),
    textarea {
        @content;
    }
}

// Apply a set of rules to button form fields.
@mixin button-form-fields {
    button, button {
        @content;
    }
}

// Apply a set of rules to select form fields.
@mixin select-form-fields {
    select {
        @content;
    }
}

// Apply a set of rules to all form fields.
@mixin all-form-fields {
    @include input-form-fields {
        @content;
    }
    @include button-form-fields {
        @content;
    }
    @include select-form-fields {
        @content;
    }
}

基本的に、all-form-fields mixin は他の mixin を呼び出し、異なるセレクターに対して同じルール セットを生成します。

次のコードをコンパイルすると:

@include all-form-fields {
    margin-bottom: .5em;
}

私は次のようなものを得るでしょう：

input:not([type="hidden"]),
textarea {
  margin-bottom: .5em;
}

button, 
.button {
  margin-bottom: .5em;
}

select {
  margin-bottom: .5em;
}

これは理想的ではありません。これらのセレクターを組み合わせることができれば幸いです。

3 つの異なる mixin によって返されたセレクター文字列をどのように組み合わせることができるかについて、誰かアイデアはありますか?

4

1 に答える 1

2

セレクターを文字列に格納してもかまわない場合は、変数を使用してさまざまなフィールド タイプを定義できます。

$input-form-fields: "input:not([type=hidden]), textarea";
$button-form-fields: "button";
$select-form-fields: "select";

次に、次のように補間された文字列でミックスインを定義します。

// Apply a set of rules to input form fields.
@mixin input-form-fields {
    #{$input-form-fields} {
        @content;
    }
}

// Apply a set of rules to button form fields.
@mixin button-form-fields {
    #{$button-form-fields} {
        @content;
    }
}

// Apply a set of rules to select form fields.
@mixin select-form-fields {
    #{$select-form-fields} {
        @content;
    }
}

// Apply a set of rules to all form fields.
@mixin all-form-fields {
    #{$input-form-fields}, 
    #{$button-form-fields}, 
    #{$select-form-fields} {
        @content;
    }
}

その@include all-form-fields結果、

input:not([type=hidden]), textarea,
button,
select {
  margin-bottom: .5em; }
于 2013-08-13T16:47:19.937 に答える