Utilizzare qualsiasi compilatore CSS (Sass, Meno) per generare il selettore [chiusa]

Question

Così ho recentemente giocato in giro con i compilatori CSS, ma non ho idea di come (o se è possibile) per generare dinamicamente pezzi di un selettore.

Per esempio, diciamo che ho voluto fare per ottenere mixins

display: inline-block; 

di lavorare cross browser. Avrei dovuto fare gli stili, sì, ma avrei dovuto fare gli hack IE6 / 7 selettore per farli lavorare in tali browser troppo. Idealmente Sto cercando un una tantum cosa da aggiungere a un elemento e hanno la capacità per questo al lavoro. Qualche persona gentile recentemente mi ha dato questa soluzione: CSS compilatori e conversione hack IE al condizionale css

e sarebbe bello per realizzare che in un modo minimale che mi permettesse di specificarlo per un dato elemento e per la mia strada (per esempio in meno, è possibile creare una classe con gli stili, passare quella classe ad un altro elemento, e che elemento si ereditano tutti quegli stili sarebbe bello passare un .inline blocco elemento,. e creano gli stili necessari per supportare IE6 / 7, senza dover ricorrere a cose come

_color: pink; 

Tutte le idee?

EDIT: per esempio, così, come potrei fare qualcosa di simile clearfix di meno? (Lesscss.org)? Se Sass solo può farlo allora che funzionerà anche.

Answer 1

Così ho fatto qualche scavo nella documentazione, e un po 'di sperimentazione, e Sass (con mio grande sollievo) supporta questo, anche se non credo MENO fa (che è il motivo per cui si sta facendo abbandonato in favore del Sass).

È possibile utilizzare la e commerciale come puntatore al selettore si è utilizzato nella definizione, e la posizione di quella commerciale in una dichiarazione nidificato non deve essere al fronte, si può mettere selettori prima di esso. Per esempio, è possibile utilizzare i tag condizionali di IE a bersaglio IE nello stesso foglio di stile in un modo che non fa uso di hack. Di seguito utilizza la notazione SCSS (ma dovrebbe funzionare bene con la notazione indentazione):

@mixin inline-block {

// Cross browser implementation of the inline-block attribute

  display: inline-block;
  body.ie6 & { display: inline; }
  body.ie7 & { display: inline; }

}

E tutto quello che dovete fare è cadere questo su tutto quello che vuoi:

#foo { @include inline-block; }

e genererà / gestire tutta la tua roba inline-block cross browser:

#foo { display: inline-block; }
body.ie6 #foo { display: inline; }
body.ie7 #foo { display: inline; }

modo semantico di gestire problematiche cross-browser, non più avere a che fare con il metodo ingombrante di gestire 2 file diversi per gli stili (che è stupido per me), non più codice del blocco brutture.

Modifica:. Certo che la funzionalità è stato indicato nella documentazione di vecchio, non nella nuova, motivo per cui non sono riuscito a trovarlo

Answer 2

Un'implementazione cross-browser di inline-block è fornita da bussola, un quadro costruito sopra sass:

http: // Bussole- style.org/docs/reference/compass/css3/inline_block/#mixin-inline-block-scss

Answer 3

http://jsfiddle.net/zsitro/G74pT/

Qui van vedere la soluzione crossbrowser per i blocchi in linea.  semplice e breve.

Sopra esempio non darà un layout per l'elemento in IE. È necessario zoom per esempio.