Share
În prima parte a acestei serii am oferit o imagine de ansamblu asupra popularelor preprocesoare CSS și SASS. De asemenea, am împărtășit câteva dintre cadrele în care sunt utilizate.
Am de gând să mă arunc mai adânc în mai puțin și să vorbesc despre părțile din limba pe care o folosesc cel mai adesea. De asemenea, am de gând să vă arăt cum să începeți să o utilizați cu CodeKit.
Hai să intrăm!
Personal folosesc mai puțin pentru cele mai multe proiecte WordPress. Petrec o multime de timp lucrand cu Standard si foloseste Bootstrap ca cadru de alegere.
Deoarece Bootstrap utilizează mai puțin pentru a-și compila CSS-ul, am învățat cum să-i folosesc .Mai puțin fișiere pentru modificări. Știu de alți designeri web și de dezvoltatori care preferă să folosească Fundația. Deoarece Fundația utilizează SASS, au învățat să o folosească în schimb.
Personal încep să lucrez la un alt proiect web care folosește SASS și a fost relativ ușor de a alege lucrurile datorită experienței mele cu LESS.
Variabilele sunt destul de explicative. Puteți crea o variabilă undeva în dvs. .Mai puțin fișier și apoi trimiteți-l în alte locații din acel fișier sau în alte fișiere. Tind să-l folosesc pentru culori, fonturi, umpluturi și margini.
Iată un exemplu:
// Variabilele @red: # ff0000; @ verde: # 00ff00; @ albastru: # 0000ff; // Styling // Link-uri a color: @ blue; a: a vizitat color: @ blue;
Aceasta va compila apoi la aceasta:
a culoare: # 0000ff; a: a vizitat color: # 0000ff;
Dacă doriți să schimbați culoarea celor două link-uri, atunci trebuie doar să modificați variabila:
@albastru
din
# 0000FF
la
# 0000a4
Schimbați într-un singur loc, recompilați și ați schimbat toate instanțele acelei variabile în întregul fișier.
O altă modalitate excelentă de a utiliza aceste variabile ar fi să folosiți o denumire mai semantică, cum ar fi:
@culoare primară
și
@secondaryColor
Apoi, puteți utiliza acele variabile în întregul cod. Când designerul vostru vine cu acele culori, le puteți schimba o singură dată, recompilați, atunci ați terminat!
Nesting se folosește la fel ca și cum ați putea crea o logică dacă / altceva Blocați-vă în PHP sau JavaScript: Ați setat selectorul de nivel superior cum ar fi .post, apoi plasați celelalte selectori în interiorul acestuia. Aceasta va elimina necesitatea de a scrie în mod repetat .post în fața celorlalți selectori cum ar fi:
// Post .post padding: 20px; .post-header margine: 20px 0;
Aceasta va compila apoi la aceasta:
.post padding: 20px; .post .post-header margine: 20px 0;
Puteți utiliza, de asemenea & să concatenăm și selectorii. Un exemplu ar putea fi dacă doriți să vizați widget-uri specifice în bara laterală. Să presupunem că doriți să schimbați culoarea de fundal a widget-urilor Recent Posts și Recent Comments în mod diferit. Puteți face următoarele în LESS:
.widget padding: 20px; & .widget_recent_entries fundal-culoare: alb; & .widget_recent_comments background-color: black;
Acest lucru se va compila în aceasta:
.widget padding: 20px; .widget.widget_recent_entries background-color: alb; .widget.widget_recent_comments background-color: black;
Puteți folosi, de asemenea, acest lucru pentru pseudo-clase ca :planare, :activ, :vizitat, :inainte de, și :după.
// Link-uri a culoare: albastru; &: hover culoare: roșu; &: vizitat culoare: roșu;
Acest lucru s-ar compila la acest lucru:
a culoare: albastru; a: hover culoare: roșu; a: vizitat culoare: roșu;
Amestecurile sunt în principiu un număr de atribute de stil pe care doriți să le grupezi împreună. Un exemplu excelent al acestui lucru este atributele care diferă între browsere ca raza de graniță.
În loc să vă amintiți fiecare, puteți să vă apelați la mixin și vă va oferi fiecare atribut pentru dvs. Iată un exemplu:
// Mixin .prima-raza border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; // Widget .widget .border-radius;
Acest lucru se va compila la următoarele:
.widget border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
Dacă doriți să folosiți raza de graniță de mai multe ori în interiorul dvs. .Mai puțin dosar, dar a vrut sume diferite pentru fiecare? Atunci vei folosi un Mixer Parametric.
Acest lucru înseamnă pur și simplu că puteți reutiliza un mixin și să-i dați un argument de utilizat. Iată un exemplu:
// Mixin. Radius-raza (@radius: 4px) raza de graniță: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // widget .widget .border-radius (); // Post .post .border-radius (8px);
Acest lucru s-ar compila la acest lucru:
.widget border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .post border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
Iată un exemplu de utilizare a variabilelor, a cuiburilor și a amestecurilor în același timp:
// Variabile @ widget-recent-posts-border-radius: 4px; @ widget-recent-posts-background-color: alb; @ widget-recent-posts-link-color: @ albastru; @ widget-recent-comments-border-radius: 8px; @ widget-recent-comentarii-fundal-culoare: negru; @ widget-recent-comentarii-link-color: @red; // Colors @ blue: # 0000ff; @red: # ff0000; // Mixins. Radius-cadru (@radius: 4px) radius-limită: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Widgeturi .widget & .widget_recent_entries fundal-color: @ widget-recent-posts-background-color; .border-rază (@ Widgetul-recente-posturi-border-radius); ul li a culoare: @ widget-recent-posts-link-color; & .widget_recent_comments fundal-culoare: @ widget-recent-comments-background-color; .border-rază (@ widget-recente comentarii-border-radius); ul li a culoare: @ widget-recent-comments-link-color;
Ceea ce s-ar compila în toate acestea:
.widget.wiget_recent_entries background-color: alb; raza de graniță: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .widget.widget_recent_entries ul li a culoare: # 0000ff; .widget.wiget_recent_comments background-color: black; raza de graniță: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; .widget.widget_recent_entries ul li a culoare: # ff0000;
Este extrem de ușor să configurați proiectul CodeKit. Puteți să glisați și să plasați direct folderul în CodeKit sau să faceți clic pe butonul plus din partea stângă jos și apoi să selectați un folder din browserul de fișiere.
Odată ce faceți acest lucru, CodeKit va scana automat toate fișierele din acel dosar și apoi le va grupa în următoarele categorii:
Ați importat acum fișierele de proiect. Apoi vom seta calea de ieșire a dvs. .Mai puțin fișiere. Mi-ar sugera să aveți a css dosarul și a Mai puțin dosarul din interiorul acestuia. Veți dori să vă asigurați că aveți toate fișierele în acest sens Mai puțin dosar pentru a indica spre dvs. style.less fişier.
Veți dori să treceți la vizualizarea Styles. Vom dori să avem style.less fișierul să fie compilat în directorul rădăcină al temei dvs. ca style.css. Pentru a face acest lucru, veți dori să faceți clic dreapta pe style.less fișier și selectați "Setați calea de ieșire ... "Aceasta va aduce un browser de fișiere.
Apoi, veți dori să faceți clic pe numele fișierului de ieșire și introducerea textului extensiei. Odată ce ați făcut că ar putea popula automat style.css Pentru dumneavoastră. Dacă nu, atunci veți dori să intrați style.css. În cele din urmă, faceți clic pe Selectați a salva.
Aproape am ajuns! Apoi va trebui să selectați o setare de compilare. Veți vedea ecranul cu setările de compilare care se va dezvălui când faceți clic pe a .Mai puțin fişier. Avem trei stiluri disponibile de ieșire:
Alegeți una dintre cele de mai sus și faceți clic pe "Compila"Trebuie să primiți o notificare că dvs. style.less fișierul a fost compilat.
Dacă toată sintaxa ta este corectă, compilația dvs. va avea succes. Dacă există erori, vă va răsturna Buturuga vizualizați și dați numărul liniei și explicația erorii.
Dacă totul se compilează corect, ar trebui să vă puteți deschide style.css fișier și vedeți ieșirea. Pe măsură ce vă editați .Mai puțin fișiere și salvați-le, CodeKit vă va recompila automat fișierele.
Notă: Asigurați-vă că nu faceți nicio modificare în style.css fișier, deoarece imediat ce vă recompilați .Mai puțin fișiere, modificările dvs. vor fi suprascrise.
Am trecut acum printr-o scufundare mai profundă în mai puțin și am desființat câteva dintre caracteristicile populare. Am explicat câteva motive pentru care eu personal aleg să folosesc mai puțin în proiectele mele WordPress și cum să folosesc CodeKit pentru a compila toate fișierele mele.
În următoarea postare, voi intra în mai multe detalii despre cum să vă structurați ".Mai puțin"și conectați-le pe toate împreună.
Accentsconagua