Posso includere una definizione css in un'altra definizione css?

Question

Quindi diciamo che ho il seguente in 'foo.css':

.border { border : solid 1px; } 
#foo { color : #123; } 
#bar { color : #a00; } 

Ora diciamo che ho due div che voglio confini per, così faccio:

<div id="foo" class="border">Foo</div> 
<div id="bar" class="border">Bar</div> 

Questo funziona bene , ma trovo che quando si definiscono #foo e #bar nel mio file css, avrei preferito dare loro le caratteristiche di .border che dare il div è la classe, in questo modo:

.border { border : solid 1px; } 
#foo { 
    <incantation to inherit from .border> 
    color : #123; 
} 
#bar { 
    <incantation to inherit from .border> 
    color : #a00; 
} 

e poi il mio html wo Sarebbe solo:

<div id="foo">Foo</div> 
<div id="bar">Bar</div> 

Qualcuno sa cos'è quell'incantesimo magico?

Answer 1

mixins with Sass. Sass ti permette di scrivere fogli di stile CSS in modo più efficiente, usando trucchi come questo. I mixins ti permettono di definire un gruppo di attributi (ad esempio, fare con i bordi), e quindi includere quegli attributi all'interno di certe classi css.

Answer 2

Questo non è supportato da css. Il meglio che puoi fare è qualcosa come:

#foo, #bar, .border { border : solid 1px; } 
#foo { color : #123; } 
#bar { color : #a00; } 

Answer 3

Come ha detto Wsanville, non è possibile utilizzare la classe. ma normale CSS eredità funziona - dire se il vostro HTML è stato

<div class="border"> 
    <div id="foo"> 
     hello 
    </div> 
    <div id="bar"> 
     world 
    </div> 
</div> 

Si potrebbe dire

.border {border: 1px solid #f00;} 
#foo {border:inherit;} 

che in alcuni casi potrebbe essere abbastanza buono

Answer 4

Se stai cercando di spingere il vostro CSS invece di usare alcuni dei trucchi delineati nei post precedenti, dovresti esaminare i compilatori CSS. Prendono codice CSS simile a quello che hai scritto, di solito CSS con alcuni trucchi aggiunti e li trasformano in normali CSS per il web.

David Ziegler scritto su alcuni compilatori fresche funzionalità CSS offrono:

• Variabili - I bravi programmatori non piace hardcode. In molti casi puoi evitarlo nei CSS usando una buona ereditarietà, ma a volte è inevitabile. Con le variabili, cambiare la combinazione di colori significa aggiornare una variabile anziché 13 attributi.

• Math - Questo va di pari passo con le variabili. Supponi che la colonna a sinistra sia 100 px, la colonna a destra sia a 500 px e che il div wrapper sia 600 px. Bene, forse decidi di cambiarlo in 960px. Non sarebbe fantastico se la larghezza delle tue colonne fosse regolata automaticamente? La risposta è si.

• Stili nidificati - Questo è probabilmente il più importante. Il CSS è piatto, il che significa che i siti complessi finiscono con i CSS che è un problema da affrontare.

Si può leggere su compilatori popolari suo blog post on the subject, o fare qualche ricerca e trovare quello che funziona meglio per voi.