Snabbtips Du måste kolla in LESS.js

Du kanske känner till sådana tjänster som LESS och Sass. De möjliggör mycket mer flexibilitet när du skapar dina stylesheets, inklusive användningen av variabler, operatörer, mix-ins, även nestade selektörer. Men eftersom MINDRE ursprungligen byggdes med Ruby, har många PHP-utvecklare, trots att det finns PHP-versioner tillgängliga, aldrig använt det.


Full Screencast



Steg 1. Referens LESS.js

 

Steg 2. Importera ett stilark

 

Observera att vi har ställt in rel attribut till "stylesheet / less" och att våra faktiska stylesheets har en förlängning av .mindre, inte .css. Vi måste också länka till det här stilarket innan Less.js.


Steg 3. Ha kul!

Med denna minimala mängd arbete har du nu tillgång till allt från variabler till mix-ins. Var noga med att titta på de fyra minuters videotillägget ovan för fullständiga exempel, men här är några få snabbare.

 / * Variabler! * / @primary_color: grön; / * Mix-ins är som funktioner för vanligt förekommande operationer, till exempel gränser. Vi skapar variabler genom att lägga ut @ -symbolen. * / .rounded (@radius: 5px) -moz-border-radius: @radius; -webkit-gränsen-radien: @radius; gränsen: @radius;  #container / * Referenser variabeln som vi skapade ovan. * / bakgrund: @primary_color; / * Ringer den runda inblandningen (funktion) som vi skapade och överstyr standardvärdet. * / .rounded (20px); / * Nested selectors ärva deras förälder väljar också. Detta möjliggör kortare kod. * / a färg: röd; 

Det är viktigt att komma ihåg att LESS.js inte är färdig. förhoppningsvis kommer det att bli snart. Ändå fungerar det fantastiskt hittills. Vad tror du?