Share
Conosci bene l'esercitazione. Vuoi dare qualche sezione del tuo sito web con angoli arrotondati con CSS3? Quindi non dovrai fare a meno di tre prefissi del venditore: webkit, moz e il modulo consigliato dal W3C. Non è un'enorme perdita di tempo - per non parlare dello spazio sullo schermo? Cosa succede se, invece, potremmo usare a classe file? Bene, possiamo! Ti mostrerò come oggi.
Se usiamo uno strumento come LESS o SASS, possiamo creare il nostro classe file abbastanza facilmente. Non hai idea di cosa sto parlando? Bene, per prima cosa, esamina questo suggerimento rapido. Ti insegnerà esattamente come rialzarti e scappare con Less.
Successivamente, abbiamo bisogno di creare un file di classi core che verrà utilizzato in ogni progetto. Sentiti libero di memorizzare questo file ovunque desideri, tuttavia, nel video qui sopra, utilizzo la nostra popolare (ed esclusiva) app Structurer.
Faremo il primo insieme, ma assicurati di rivedere lo screencast per ulteriori dettagli.
.border-radius (@radius: 3px) -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;
In termini di convenzioni di denominazione, ho scoperto che è più intelligente usare il nome ufficialmente raccomandato per il nome della tua classe - in questo caso, "border-radius."Per dichiarare le variabili con Less, le prefiguriamo con un @ simbolo. In questo caso, stiamo impostando un valore predefinito di 3px, tuttavia, se avessimo bisogno di scavalcare quel valore nel nostro progetto, è un gioco da ragazzi!
#someElement .border-radius (10px);
A questo punto, basta semplicemente risciacquare e ripetere per ogni proprietà che richiede più prefissi del fornitore. Ecco una manciata per iniziare:
.box-shadow (@x: 2px, @y: 2px, @blur: 5px, @spread: 0, @color: rgba (0,0,0, .6)) -webkit-box-shadow: @x @ y @blur @spread @color; -moz-box-shadow: @x @y @blur @spread @ color; box-shadow: @x @y @blur @spread @ color;
.transizione (@what: all, @length: 1s, @easing: easy-in-out) -webkit-transition: @what @length @easing; -moz-transition: @what @length @easing; -o-transizione: @what @length @easing; transizione: @what @length @easing;
.box (@orient: orizzontale, @pack: center, @align: center) display: -webkit-box; display: -moz-box; casella di visualizzazione; -webkit-box-orient: @orient; -moz-box-orient: @orient; box-orient: @orient; -webkit-box-pack: @pack; -moz-box-pack: @pack; confezione: @pack; -webkit-box-align: @align; -moz-box-align: @align; box-align: @align;
.flex (@val: 1) -webkit-box-flex: @val; -moz-box-flex: @val; box-flex: @val;
Mi piacerebbe sentire i tuoi pensieri su questo. Se ti piace l'idea, carichiamo il turbo di questo foglio di stile.
Accentsconagua