Share
Less.CSS devine un instrument popular pentru crearea de foi de stil "dinamice". Am lucrat cu integrarea mai puțin.CSS cu WordPress pentru un timp acum, deci astăzi vom fi în căutarea unui scurt tutorial despre cum să începeți cu utilizarea acestuia și a cadrului BluePrint CSS pentru un flux de lucru mai rapid în WordPress.
Știu la ce te gândești, dar, oameni buni, asta nu înseamnă că scrii doar coduri mai mici. De câte ori ați lucrat la un proiect și ați dorit să simplificați lucrurile prin includerea unei funcții în fișierul dvs. CSS, utilizând câteva variabile pentru a schimba culorile sau alte proprietăți sau alte programe cum ar fi tehnicile? Cu mai puțin CSS, dorința ta poate fi transformată în realitate.
Mai puțin este un instrument CSS care vă permite să accelerați și să vă simplificați dezvoltarea, permițându-vă să utilizați variabile, moștenire (prin mixuri), funcții (operații) și multe altele. Pe scurt, Less CSS vă oferă posibilitatea de a combina tehnicile de programare cu CSS. Vorbeste destul. Să începem!
Mai puțin vine în două arome principale, o versiune compilată și o versiune propulsată de JavaScript. În scopul discuției noastre, ne vom concentra pe compilat versiune. Am ales să mă concentrez asupra acestei versiuni, în primul rând pentru că nu îmi place să includ și fișiere în site-ul meu pe care nu trebuie. La urma urmei, fiecare fișier pe care site-ul dvs. are nevoie să îl funcționeze și să arate atractiv cauzează încărcarea site-ului puțin mai lent.
Deci, modul în care funcționează este după cum urmează: accesați următorul link și descărcați aplicația pentru Mac. Ne pare rău de utilizatorii Windows, este numai Mac, astfel încât această versiune a tutorialului va funcționa numai pentru utilizatorii Mac. După ce descărcați aplicația, trebuie să configurați structura site-ului dvs. (pe care o voi acoperi mai jos).
Vom prezenta o mulțime de conținut în acest tutorial. Cred că lucrez cât mai eficient cu cele mai bune instrumente disponibile. Din acest motiv, vom fi angajați WordPress și Plan pentru a lucra cu acest proiect. Înainte de a trece la următorul pas, continuați și descărcați planul Blueprint.
Singurul fișier pe care îl vom folosi este screen.css deoarece combină toate fișierele majore care alcătuiesc cadrul într-un fișier. Continuați și găsiți acest lucru și trageți-l pe desktop. În scopul de scurtătate acest tutorial presupune că sunteți familiarizați cu înființarea WordPress, precum și elementele de bază ale Blueprint. Dacă aveți nevoie de mai multe informații despre acest lucru, lăsați-mi câteva comentarii și voi răspunde sau voi scrie un post pe el. Există, de asemenea, un tut informativ pe Nettuts despre Blueprint
Pentru a configura structura fișierelor, consultați captura de ecran de mai jos. Aceasta ar trebui să arate structura directorului dvs., minus fișierele CSS din dosarul stilurilor. Acestea vor fi generate automat pentru dvs. atunci când salvați un fișier.
Lucrurile importante de luat de pe această captură de ecran sunt că avem un dosar styles.css în directorul temă din WordPress, care are unele șmecheri. Acest fișier doar trage în alte fișiere dintr-un subdirector prin intermediul directivei @import. Motivul pentru aceasta este că WordPress utilizează comentariile din styles.css pentru a identifica o temă. A nu pune acest lucru în tendința de a mizeria lucrurile destul de rău. Prin includerea fișierelor în styles.css fișierul printr-un material compozit profită în mod esențial de toate caracteristicile dinamice ale CSS mai puțin, asigurându-ne în același timp că tema noastră se comportă corect în WordPress. De asemenea, minimizăm CSS-ul nostru, pentru a accelera timpul de încărcare al site-ului. În plus, va elimina toate comentariile și spațiul alb.
Există câteva setări pe care îmi place să le verific. Probabil că doriți și să faceți acest lucru. Mai jos este o captură de ecran a acestora.
Apoi, plasați screen.css fișier într-un subdirector numit foi de stil împreună cu un fișier principal.css. Apoi, redenumiți ambele fișiere pentru a avea o extensie inexistentă în loc de .css. Odată ce ați făcut acest lucru, mergeți mai departe și aprindeți aplicația Mai puțin pe Mac și trageți dosarul tematic în aplicație. Acest lucru îl stabilește în mod esențial, astfel încât aplicația mai mică să știe despre proiectul dvs. Acum, de fiecare dată când salvezi mai puține fișiere, ei se compilesc automat în CSS. Destul de furios, nu? Dacă dintr-un anumit motiv acest lucru nu se întâmplă, puteți face clic pe fila compilator și faceți clic pe compilați toate.
Ok, acum, că toate astea sunt stabilite, ce face mai puțin pentru mine? Mă bucur că l-ai întrebat pe tânărul Padawan. Lasa-ma sa-ti arat!
Deci, spuneți că aveți câteva culori primare pe site-ul dvs. În loc de a pune valorile hexazecimal sau RGBA de fiecare dată când doriți să folosiți o culoare, puteți utiliza pur și simplu o variabilă pentru stocarea culorii și apoi utilizați numele variabilei pentru a identifica culoarea pe care doriți să o utilizați. De exemplu, pentru a stoca gri deschis, puteți declara o variabilă asemănătoare:
@lightGray = #ddd; / * - și apoi folosiți-l în CSS-ul dvs.: - * / div # box1 background: @lightGray;
Acum, ori de câte ori trebuie să vă schimbați culoarea, tot ce trebuie să faceți este să modificați valoarea @lightGray și aceasta va propaga totul în restul fișierului dvs. css.
Următorul truc minunat pe care vreau să-l discutăm este moștenirea. Pentru începătorii CSS acolo, moștenirea înseamnă doar că o clasă poate moșteni sau prelua trăsături dintr-o clasă anterioară (clasa părinte). Aceasta se face printr-o construcție mai puțin cunoscută sub numele de Mixins. Acestea încorporează efectiv toate proprietățile unei clase într-o altă clasă. Unul dintre lucrurile interesante despre Mixins este că orice proprietate pe care o specificați în clasa copilului dvs. va suprascrie același comportament care este moștenit de la clasa părinte. În limba engleză, aceasta înseamnă că am o clasă care îmi formulează butoanele de pe pagina mea utilizând niște gradienți de css3 la îndemână. Deși îmi place umplutura, dimensiunea fontului și alte atribute ale butonului, aș putea dori ca culorile mele să se schimbe. Aș face următoarele:
/ * - Butonul pe care îl folosesc ca buton de bază / părinte - * / .myBlueButton display: block; padding: 4px 12px; fundal: rgb (30,87,153); / * Browsere vechi * / fundal: -moz-linear-gradient (top, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51% 1) 100%); / * FF3.6 + / fundal: -webkit-gradient (liniar, stânga sus, fund stânga, stop color (0%, rgba (30,87,153,1) , 1)), stop color (51%, rgba (32,124,202,1)), stop color (100%, rgba (125,185,232,1)); / * Chrome, Safari4 + * / fundal: -webkit-gradient linear (rgba (30,87,153,1) 0%, rgba , 1) 100%); / * Chrome10 +, Safari5.1 + * / fundal: -o-gradient linear (top, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) rgba (125,185,232,1) 100%); / * Opera11.10 + * / fundal: -ms-gradient linear (top, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 125,185,232,1) 100%); / * IE10 + * / fundal: gradient liniar (top, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51% ); / * W3C * / / * - Buton pe care Im îl folosesc ca buton copil / moștenire - * / .myGreenButton .myBlueButton; fundal: rgb (157,213,58); / * Browsere vechi * / background: -moz-linear gradient (top, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124,188,10,1) 100%); / * FF3.6 + / fundal: -webkit-gradient (linia, stânga sus, fundul stâng, stopul de culoare (0%, rgba (157,213,58,1) , 79,1)), stop color (51%, rgba (128,194,23,1)), stop color (100%, rgba (124,188,10,1)); / * Chrome, Safari4 + * / fundal: -webkit-gradient linear (top, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) , rgba (124,188,10,1) 100%); / * Chrome10 +, Safari5.1 + * / fundal: -o-gradient linear (top, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1 ) 51%, rgba (124,188,10,1) 100%); / * Opera11.10 + * / fundal: -ms-gradient linear (top, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51 %, rgba (124,188,10,1) 100%); / * IE10 + * / fundal: gradient liniar (top, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51% 10,1) 100%); / * W3C * /
Există o avertisment care trebuie păstrat în minte. Dacă utilizați generatorul de gradienți css3, Less nu pare să vă placă linia care începe cu filtrul. După cum puteți vedea, butonul copil apucă toate comportamentele de la butonul părinte, incluzând atributele butonului albastru de pe linia marcată.
myBlueButton;
.
Apoi suprascrie culoarea specificând propriile culori de fundal. Următorul și ultimul element pe care îl vom acoperi este utilizarea unei amestecări parametrice (o amestecare care ia parametrii) cu Mai puțin. Acest lucru este util în situațiile în care utilizați prefixe specifice browserului și altele asemenea.
.borderRadius (@border_radius) -moz-border-radius: @border_radius; -webkit-radius: @border_radius; - raza de graniță: @ border_radius;
Desigur, există multe alte comportamente și efecte pe care le puteți implementa. Puteți urmări legătura din partea de sus a site-ului tut pe site-ul Less și studiați conținutul inimii. Există, de asemenea, un video rapid pe Nettuts care vorbește despre biblioteca Less.js.
Acestea sunt elementele de bază ale modului de a configura un proiect de utilizat în WordPress cu Less și BluePrint. Sper că ceea ce ați învățat astăzi aici se va dovedi util pentru viitoarele proiecte. Dacă aveți mai multe întrebări, nu ezitați să răspundeți la comentarii.
Accentsconagua