4

HTML5 入力タイプのリストを返す mixin 関数が必要です。これを 1 か所で管理し、新しい型が出現したら、コード内のすべての場所ではなく、関数を変更したいと考えています。

問題は、ミックスインが、CSS の中括弧の外で使用できる文字列を返すように設計されていないことです。私の mixin の例 (現在エラーを返しています) とその使用方法を次に示します。

/* 
 * Set all the up-and-coming input text types here for easier reference 
 * Does not include types that are not meant to be displayed full width, such as: 
        type=number, type=range, type=date, type=color
 */
@mixin input_text_types( $focus:false ) {
    @if $focus {
        @return #{input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus};
    } @else {
        @return #{input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel]};
    }
}

使用中で：

@include input_text_types() {
    width: 80%; 
}

私が得るエラーは次のようなものですerror sass/style.scss (Line 134 of sass/_functions.scss: Invalid CSS after "...@return #{input": expected "}", was "[type=text]:foc...")

ディレクティブの有無にかかわらず出力をフォーマットしようとしましたが、@return文字列値を囲むさまざまな方法 (引用符、一重引用符、ハッシュ付きの中括弧) を使用しました。誰かが前にこのようなことをしようとしたことがありますか?

4

2 に答える 2

4

変数を使用してセレクターを含めることで、問題を解決できる場合があります。mixin を使用すると、同様の要素とチェーンする機能が失われます。

$form-input-text: 'input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]';
$form-input-buttons: 'input[type="submit"], input[type="reset"], input[type="button"], button';
$form-input-dates: 'input[type^="date"], input[type="month"], input[type="week"], input[type="time"]';
$form-input-not-radio: 'input:not([type="radio"]):not([type="checkbox"])';

#{$form-input-text}, textarea {
    @include border-radius(.25em);
    border: $form-input-border;
}

#{$form-input-text}, textarea, input[type="file"] {
    width: $form-input-width;
    max-width: 100%;
    -webkit-appearance: textfield
}

#{$form-input-buttons} {
    padding: .25em .5em;
}
于 2013-06-28T17:46:17.740 に答える