Potresti avere familiarità con servizi come LESS e Sass. Offrono molta più flessibilità durante la creazione dei fogli di stile, compreso l'uso di variabili, operatori, mix-in, anche selettori annidati. Tuttavia, poiché LESS è stato originariamente creato con Ruby, molti sviluppatori PHP, nonostante il fatto che siano disponibili versioni PHP, non lo ha mai usato.
Si noti che abbiamo impostato il rel attributo a "stylesheet / less" e che i nostri fogli di stile effettivi hanno un'estensione di .Di meno, non .css. Inoltre, dobbiamo collegarci a questo foglio di stile prima Less.js.
Con questa minima quantità di lavoro, ora hai accesso a tutto, dalle variabili ai mix-in. Assicurati di guardare il video tutorial di quattro minuti sopra per esempi completi, ma qui ci sono alcuni quickies.
/ * Variabili! * / @primary_color: green; / * I mix-ins sono come funzioni per le operazioni di uso comune, come ad esempio applicare i bordi. Creiamo le variabili anteponendo il simbolo @. * / .rounded (@radius: 5px) -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; #container / * Indica la variabile che abbiamo creato sopra. * / background: @primary_color; / * Chiama il mix-in (funzione). Che abbiamo creato e sostituisce il valore predefinito. * / .rounded (20px); / * I selettori annidati ereditano anche il selettore dei genitori. Questo consente un codice più breve. * / a colore: rosso;
È importante ricordare che LESS.js non è finito; si spera, lo sarà presto Tuttavia, sta funzionando meravigliosamente finora. Cosa pensi?