2011-09-28 7 views
8

Let' dire che ho il seguente Meno di impostazione:Come applicare le classi concimate in un'altra classe usando Meno?

.box { 
border: 1px solid #333; 
&.error { 
    background-color: Red;   
} 
} 

e volevo dichiarare un'altra classe, che applicato lo stile pieno di .box.error, come .error-box per esempio, qual è la sintassi corretta?

se uso:

.error-box { 
.box.error; 
} 

Tutto quello che ottiene è lo sfondo rosso, con nessun bordo. Ho provato diverse combinazioni, ma ottengo sempre errori di sintassi.

risposta

16

ho inserito nella vostra meno come così:

.box { 
    border: 1px solid #333; 
    &.error { 
     background-color:red; 
    } 
} 

.error-box { 
    .box; 
} 

e l'uscita CSS è stato questo:

.box { 
    border: 1px solid #333; 
} 
.box.error { 
    background-color: red; 
} 
.error-box { 
    border: 1px solid #333; 
} 
.error-box.error { 
    background-color: red; 
} 

stati che vogliono la classe .error-box al solo ricevere entrambi gli stili? L'unico modo che posso pensare di fare sarebbe:

.error-bg { 
    background:red; 
} 

.box { 
    border:1px solid #333; 
    &.error { 
     .error-bg; 
    } 
} 

.error-box { 
    .box; 
    .error-bg; 
} 
Problemi correlati