Variabili SCSS come classe @extend

La mia idea è che mi piacerebbe scrivere classi silent per input[type=text], input[type="password"] e input[type=submit]. Vorrei quindi aggiungere @extend in un missaggio passando l'orlo come variabile.Variabili SCSS come classe @extend

Il mio parser lancia questo errore;

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

Ecco il mio codice;

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

Qualsiasi aiuto sarebbe apprezzato

fonte

2013-07-09 Kevin Lewis

provare a utilizzare le variabili di interpolazione

@extend #{$type};

Ulteriori informazioni su SASS Reference

fonte

2013-07-09 10:47:47 fcalderan

Non genera più un errore per questo, ma ora è quando sto cercando di estendere. Sto usando la riga '@extend input (% text);' e l'errore in arrivo è 'CSS non valido dopo" @extend input ": atteso"} ", era" (% text); " –

You can ' t estendere un mixin, solo un semplice selettore (classe, id, elemento, ecc.). Inoltre, è necessario citare il selettore quando lo si passa come argomento a un mixin (ad esempio '@include input ('% foo')'). – cimmanon

Mentre la risposta di Fabrizio è formalmente corretta, considerare non andare in questo modo.

C'è una grande regola nella programmazione di qualsiasi tipo: "mantieni la semplicità, stupida!" alias KISS.

Sebbene SASS fornisca strutture avanzate come estensioni e mix, non significa che è necessario utilizzarle il più possibile. Non complicare il tuo codice quando non devi!

Questo codice fa esattamente ciò che si vuole: l'applicazione di stili di input[...] selettori:

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

Se si desidera applicare stili ai personalizzati classi/ids, considerare questo approccio:

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

fonte

2013-07-09 12:19:29

Variabili SCSS come classe @extend

risposta

Problemi correlati