Sfat rapid trebuie să vizitați LESS.js

S-ar putea să fiți familiarizați cu astfel de servicii, cum ar fi LESS și Sass. Ele permit mult mai multă flexibilitate atunci când creează foile de stil, inclusiv utilizarea variabilelor, operatori, mix-uri, chiar selectori imbricați. Cu toate acestea, deoarece LESS a fost construit inițial cu Ruby, o mulțime de dezvoltatori PHP, în ciuda faptului că există versiuni PHP disponibile, nu au folosit-o niciodată.


Full Screencast



Pasul 1. Referința LESS.js

 

Pasul 2. Importați o foaie de stil

 

Rețineți că am setat rel atribut la "foaie de stil / mai puțin" și că foile noastre de stil reale au o extensie de .Mai puțin, nu .css. De asemenea, trebuie să conectăm această foaie de stil inainte de Less.js.


Pasul 3. Distrează-te!

Cu această cantitate minimă de lucru, aveți acum acces la tot, de la variabile la mix-uri. Asigurați-vă că vizionați tutorialul video de patru minute de mai sus pentru exemple complete, dar aici sunt câteva replici rapide.

 / * Variabile! * / @primary_color: verde; / * Mix-in-urile sunt funcții asemănătoare pentru operațiile utilizate în mod obișnuit, cum ar fi aplicarea frontierelor. Vom crea variabile prin prefixarea simbolului @. * / înconjurat (@radius: 5px) -moz-border-radius: @radius; -webkit-border-radius: @radius; raza de graniță: @radius;  #container / * Referințe variabila am creat mai sus. * / background: @primary_color; / * Se apelează funcția de amestec in-built (funcție) pe care am creat-o și suprascrie valoarea implicită. * / .inclus (20px); / * Selectorii încorporați moștenesc selectorul părinților lor. Acest lucru permite codul mai scurt. * / a culoare: roșu; 

Este important să rețineți că LESS.js nu este terminat; sperăm că va fi în curând. Cu toate acestea, funcționează minunat până acum. Tu ce crezi?

Cod