13

input[type=text]私の考えは、input[type="password"]とのサイレント クラスを書きたいということですinput[type=submit]。次に@extend、hem を変数として渡すことで mixin に入れます。

パーサーがこのエラーをスローしています。

Syntax error: Invalid CSS after "   @extend ": expected selector_sequence, was "$type;"

これが私のコードです。

%text {
    (text styling)
}

%password {
    @extend %text;
}

%submit {
    padding: .5em;
    background-color: $button-color;
    border: none;
    cursor: pointer;
    color: white;
    border: 1px solid darken($button-color, 20%);
    &:hover {
        @include transition;
        background-color: darken($button-color, 10%);
    }
}

@mixin input($type) {
    margin-bottom: 1.5em;
    margin-left: 0;
    outline: none;
    @extend $type;
}

どんな助けでもいただければ幸いです

4

2 に答える 2

2

ファブリツィオの答えは正式には正しいですが、そのようにしないことを検討してください。

どんな種類のプログラミングにも、「シンプルに、愚かに」という素晴らしいルールがあります。通称KISS。

SASS は extends や mixin などの高度な機能を提供していますが、それらを可能な限り使用する必要があるという意味ではありません。必要がないときは、コードを複雑にしないでください。

このコードはまさにあなたが望むことを行います: スタイルをinput[...]セレクターに適用します:

input {
    margin-bottom: 1.5em;
    margin-left: 0;
    outline: none;
}

input[type=text], input[type=password] {
    font-family: Verdana; // Text styles
} 

input[type=submit]  {
    padding: .5em;
    background-color: $button-color;
    border: none;
    cursor: pointer;
    color: white;
    border: 1px solid darken($button-color, 20%);
    &:hover {
        @include transition;
        background-color: darken($button-color, 10%);
    }
}

カスタム クラス/ID にスタイルを適用する場合は、次のアプローチを検討してください。

/////////////////
// Silent classes
/////////////////

%input {
    margin-bottom: 1.5em;
    margin-left: 0;
    outline: none;
}

%text {
    @extend %input;
    font-family: Verdana;
}

%password {
    @extend %text;
}

%submit {
    @extend %input;
    padding: .5em;
    background-color: $button-color;
    border: none;
    cursor: pointer;
    color: white;
    border: 1px solid darken($button-color, 20%);
    &:hover {
        @include transition;
        background-color: darken($button-color, 10%);
    }
}



///////////////////////////
// Applying silent classes:
///////////////////////////

.some .weirdly .nested input[type=text] {
    @extend %text;
}

.password {
    @extend %password;
}

#the-submit-button {
    @extend %submit;
}

デモ: http://sassbin.com/gist/5956909/

于 2013-07-09T12:19:29.343 に答える