Suggerimento rapido è necessario controllare LESS.js

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.


Screencast completo



Passaggio 1. Riferimento LESS.js

 

Passaggio 2. Importare un foglio di stile

 

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.


Passaggio 3. Divertiti!

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?