SCSS Variablen als @Extend Klasse

Meine Idee ist, dass ich schweigen Klassen für input[type=text], input[type="password"] und input[type=submit] schreiben möchte. Ich würde dann @extend sie in einem Mixin durchreichen als Variable.SCSS Variablen als @Extend Klasse

Mein Parser wirft diesen Fehler;

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

Hier ist mein Code; formal korrekt

%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; 
}

Jede Hilfe wäre

Quelle

2013-07-09 Kevin Lewis

versuchen Variablen durch Interpolation

@extend #{$type};

Weitere Informationen über SASS Reference

Quelle

2013-07-09 10:47:47 fcalderan

Es ist nicht mehr ein Fehler dafür, aber jetzt ist, wenn ich versuche zu erweitern. Ich benutze die Zeile '@extend input (% text);' und der folgende Fehler ist 'Ungültiges CSS nach" @extend input ": expected"} ", war" (% text); " –

Sie können ' t erweitern ein Mixin, nur einen einfachen Selektor (Klasse, ID, Element, etc.). Außerdem müssen Sie Ihren Selektor angeben, wenn Sie ihn als Argument an ein Mix-In übergeben (zB. @include input ('% foo') '). – cimmanon

geschätzt werden Während Antwort Fabrizio ist, sollten Sie nicht auf diese Weise gehen.

Es gibt eine große Regel in der Programmierung jeder Art: "behalte es einfach, dumm!" aka KISS.

Obwohl SASS so fortschrittliche Funktionen wie Erweiterungen und Mixins bietet, heißt das nicht, dass Sie sie so oft wie möglich verwenden sollten. Machen Sie Ihren Code nicht kompliziert, wenn Sie nicht müssen!

Dieser Code macht genau das, was Sie wollen: Stile input[...] Selektoren Anwendung:

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%); 
    } 
}

Wenn Sie Stile benutzerdefinierte Klassen/ids anwenden, betrachten diesen Ansatz:

///////////////// 
// 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; 
}

Demo: http://sassbin.com/gist/5956909/

Quelle

2013-07-09 12:19:29

SCSS Variablen als @Extend Klasse

Antwort

Verwandte Themen