Până în prezent, am folosit PostCSS pentru a face lucruri cum ar fi optimizarea foilor de stil, adăugarea de funcții pentru preprocesare și generarea anumitor convenții de clasificare a claselor, dar cum poate ajuta doar să scrieți vechi CSS vechi?
Există atât de multe bucăți mici de cod pe care web designerul mediu le tipărește de mii de ori în cursul carierei și dacă puteți câștiga doar puțin timp înapoi pe fiecare, se adaugă până la sfârșitul anului.
În acest tutorial vom folosi PostCSS pentru a reduce timpul de introducere a codului în fiecare zi, printr-o serie de comenzi rapide și scurte adăugări. Sa incepem!
Configurați-vă proiectul
Veți cunoaște acest proces până acum, dar primul lucru pe care trebuie să-l faceți este să vă configurați proiectul pentru a utiliza fie Gulp, fie Grunt. Dacă nu aveți deja o preferință pentru unul sau altul, vă recomandăm să utilizați Gulp, deoarece veți avea nevoie de un cod mai mic pentru a atinge aceleași scopuri, așadar ar trebui să vă simțiți puțin mai ușor să lucrați cu.
Puteți citi despre cum să configurați proiectele Gulp sau Grunt pentru PostCSS în tutorialele anterioare
PostCSS Ghid de pornire rapidă: Gulp Setup sau
PostCSS Ghid de pornire rapidă: Configurarea gruntului
respectiv.
Dacă nu doriți să configurați manual proiectul de la zero, puteți să descărcați fișierele sursă atașate acestui tutorial și să extrageți proiectul Gulp sau Gruntul furnizat într-un dosar gol al proiectului. Apoi, cu un terminal sau un prompt de comandă indicat la dosarul de executare a comenzii npm install.
Instalați pluginurile
Pentru acest tutorial vom instala mai multe pluginuri, fiecare manipulând un alt tip de scurtătură sau stenogramă.
Indiferent dacă utilizați Gulp sau Grunt, executați următoarea comandă în dosarul proiectului pentru a instala pluginurile pe care le vom folosi:
Acum suntem gata să încărcăm pluginurile în proiectul tău.
Încărcați pluginurile prin Gulp
Dacă utilizați Gulp, adăugați aceste variabile sub variabilele deja în fișier:
var alias = cer ('postcss-alias'); var crip = necesită ("postcss-crip"); var magician = cer ("postcss-font-magician"); triangle var = cer ("postcss-triunghi"); var cerc = cer (cerc postcss); var linkColors = cer ('postcss-all-link-colors'); var centru = necesită ("postcss-center"); var clarfix = cer ('postcss-clearfix'); var pozitie = necesita (postcss-position); var size = necesită ('postcss-size'); var verthorz = necesită ("postcss-verthorz"); var colorShort = cer ('postcss-color-short');
Acum adăugați fiecare dintre aceste nume de variabile noi în dvs. procesoare matrice:
Faceți un test rapid că totul funcționează prin rularea comenzii gulp css verificând apoi că un nou fișier "style.css" a apărut în folderul "dest" al proiectului.
Încărcați pluginurile prin intermediul Grunt
Dacă utilizați Grunt, actualizați procesoare obiect, care este imbricat sub Opțiuni obiect, la următoarele:
Faceți un test rapid că totul funcționează prin rularea comenzii zgâria postcss verificând apoi că un nou fișier "style.css" a apărut în folderul "dest" al proiectului.
Bine, acum plug-in-urile sunt toate instalate să învățăm cum să le folosim pentru comenzi rapide și scurtături CSS.
Utilizați Shorthand pentru proprietăți
Există o mulțime de proprietăți pe care trebuie să le tipăm mereu și peste din nou în CSS. Desigur, timpul necesar pentru a introduce o mână de caractere o dată este foarte mic, dar de-a lungul anilor de dezvoltare se adaugă totul. Vom arăta aici două pluginuri care vă permit să tăiați aceste proprietăți până la versiuni de prescurtare pentru a putea obține un flux rapid și neted, mergând pe măsură ce vă ciocaniți pe CSS.
Definiți-vă propriul shorthand
Plugin-ul postcss-alias de către Sean King vă permite să vă definiți propriile stenograme, sau "aliasuri", pentru orice proprietăți pe care doriți să le abreviați. Acest lucru vă oferă o modalitate de a vă asigura că stenograma pe care o utilizați se potrivește cu modul în care funcționează mintea dvs. și de aceea este ușor să vă amintiți.
Pentru a defini unele pseudonime, adăugați o regulă la început în foaia de stil cu sintaxa @alias .... Apoi, în cadrul setării la regula, aliasurile dvs. adăugați alias-name: proprietate-nume;.
Adăugați exemplul următor în fișierul "src / style.css", care va configura aliasurile pentru frontieră dimensiuni, Stil de frontieră și border-color proprietăţi:
@alias bsz: dimensiunea frontierei; bst: stil de frontieră; bcl: culoarea frontală;
Apoi, adăugați acest cod pentru a testa folosind noile aliasuri:
.set_border bsz: 1px; bst: solid; bcl: #ccc;
Compilați fișierul, iar în fișierul "dest / style.css" ar trebui să vedeți acum:
.set_border border-size: 1px; stilul frontal: solid; culoare frontală: #ccc;
Citiți mai multe despre postcss-alias la: https://github.com/seaneking/postcss-alias
Plug 'n' Play Shorthand
Dacă doriți să utilizați o mulțime de constrângeri de proprietate, dar nu doriți să treceți prin pașii de definire a fiecăruia de unul singur, puteți verifica plugin-ul postcss-crip de către Johnie Hjelm, care are sute de abrevieri de proprietate gata pentru plugin și juca utilizare.
De exemplu, adăugați următorul cod în fișierul "src / style.css", care conține scurta descriere a fișierului margin-top, margin-dreapta, margin-bottom și -Marginea din stânga proprietăţi:
Citiți mai multe despre postcss-crip la: https://github.com/johnie/postcss-crip
Și vedeți lista completă a abrevierilor de proprietăți la: https://github.com/johnie/crip-css-properties
Ieșire @ font-face într-o singură linie
Plugin-ul postcss-font-magician de Jonathan Neal trăiește foarte mult până la numele său. Acesta vă permite să utilizați fonturi personalizate printr-o simplă familie de fonturi rulează ca și cum ai folosi un font standard, iar fontul va funcționa magic.
Adăugați următorul cod în fișierul "src / style.css":
corp font-family: "Indie Flower";
Asta e. Asta e tot ce trebuie pentru a face uz de postcss-font-magician. Nicio sintaxă specială, utilizați doar numele fontului ca și alții.
În acest caz, fontul Indie Flower este unul pe care l-am selectat din biblioteca Fonturi Google. Nu am adăugat niciun fișier de fonturi personalizat în proiectul meu, așa că plugin-ul va vedea asta și, în schimb, verificați dacă fontul specificat este disponibil de la Google Fonts. Atunci când constată că este disponibil, va crea corespunzător @ Font-face cod complet automat.
Compilați fișierul dvs., apoi căutați fișierul "dest / style.css", unde veți vedea că acest cod a fost adăugat în:
@ font-face font-family: "Indie Flower"; font-style: normal; greutatea fontului: 400; src: local ("Indie Flower"), local (IndieFlower), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nZ2MAKAc2x4R1uOSeegc5U.eot?#) format ("eot"), url (// fonts. gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format ("woff2"), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format ("woff" );
Puteți verifica dacă fonturile se încarcă corect creând un fișier nou în directorul "dest" numit "index.html" și adăugând acest cod la el:
Teste de testare
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Pellentesque pretium bibendum nisl. Mauris eget orci eget nisi tristic lobortis. Rutrum pellentesque id ligula quis tempus. Vivamus tempo, chiar la semper volutpat, lorem justo tincidunt urna, în mattis lorem dolor condimentum diam. În cazul în care acest lucru nu este valabil, vă rugăm să ne contactați. Aenean efficitur efficitur nisi. Vivamus leo felis, semper quis rutrum ue, eleifend eu quam.
Pentru fonturile care se încarcă, va trebui să vizualizați acest fișier prin intermediul unui http: // adresa, mai degrabă decât a fişier:// adresa, deci încărcați fișierul într-o gazdă web sau utilizați o aplicație ca Prepros pentru a crea o previzualizare live.
Ar trebui să vedeți fontul Indie Flower aplicat întregului dvs. text, după cum urmează:
Citiți mai multe despre postcss-font-magician aici: https://github.com/jonathantneal/postcss-font-magician
Creați forme CSS
Dacă ați folosit vreodată CSS pur pentru a crea forme, veți ști că poate fi o modalitate excelentă de a include obiecte precum cercuri și triunghiuri în desenele dvs., dar că poate fi și destul de dificilă. În special în cazul triunghiurilor, imaginarea a ceea ce aveți nevoie pentru a obține o formă orientată în direcția corectă la dimensiunea potrivită se poate simți într-o oarecare măsură contrară intuitivă.
Acolo se află cele două pluginuri postcss-cerc și postcss-triunghi de Jed Mao. Ambele pluginuri creează o sintaxă simplificată și un mod intuitiv de a crea cercuri și triunghiuri cu CSS pur.
Adăugați un cerc
Pentru a crea un cerc, utilizați sintaxa cerc: dimensiunea culorii;. Adăugați următorul cod în fișierul "src / style.css":
.cerc cerc: 8rem # c00;
Compilați-l și veți vedea următorul cod adăugat în fișierul "dest / style.css":
Acum, adăugați acest cod HTML în fișierul "dest / index.html" pe care l-ați creat în ultima secțiune:
Luați o privire nouă la fișierul dvs. într-un browser și acum ar trebui să vedeți un cerc roșu:
Citiți mai multe despre cerc postcss la: https://github.com/jedmao/postcss-circle
Adăugați un triunghi
Există trei tipuri de triunghi pe care le puteți adăuga utilizând acest plugin; isoscele, drept-isoscele și echilateral. Fiecare dintre ele are seturi de sintaxă puțin diferite, pe care le puteți citi în întregime la Github repo.
Vom trece prin adăugarea unui triunghi isoscel, sintaxa pentru care este:
triunghi: arătând-; lăţime: ; înălţime: ; culoare de fundal: ;
Să adăugăm acest exemplu triunghi isoscele în fișierul "src / style.css":
Pentru a vedea triunghiul din fișierul "dest / index.html", adăugați acest html:
La reîmprospătarea acestui fișier în browserul dvs., ar trebui să vedeți acum un triunghi roșu de isoscele care indică spre dreapta:
Citiți mai multe despre triunghiul postcss la: https://github.com/jedmao/postcss-triangle
Utilizați Comenzi rapide pentru activități obișnuite
Setați stilul de legătură
Setarea culorilor pentru linkuri este o sarcină care trebuie făcută în fiecare proiect și necesită setarea stilurilor pentru linkurile implicite, precum și patru stări de legături diferite. Plug-ul postcss-all-link-colors de Jed Mao vă permite să faceți scurtcircuitul acestui proces, afișând culorile pentru toate link-urile simultan.
Adăugați următoarele în "src / style.css":
o @ link-culori toate # 4D9ACC;
Apoi compilați fișierul și veți vedea că toate stările de legătură necesare au fost setate:
De asemenea, aveți opțiunea de a genera o culoare diferită pentru o anumită stare. Doar adăugați niște bretele curbate la sfârșitul regulii și în interiorul căruia folosiți sintaxa stare: culoare;.
Actualizați codul pe care tocmai l-ați adăugat în fișierul "src / style.css" la următoarele:
o @ link-culori toate # 4D9ACC hover: # 5BB8F4;
Acum, când compilați, veți vedea că starea de hover are o culoare diferită față de restul stilurilor:
Citiți mai multe despre culorile postcss-all-link-uri la: https://github.com/jedmao/postcss-all-link-colors
Centrul vertical sau orizontal
Centrarea, fie pe verticală, fie pe orizontală, este una dintre sarcinile care este un ghinion perpetuu în partea dezvoltatorilor CSS. Pluginul postcss-center al lui Jed Mao face sarcina mult mai simplă odată cu introducerea top: centru; pentru centrarea verticală și stânga: centru; pentru centrarea orizontală.
Notă: centrarea folosește poziționarea absolută, deci va trebui să înfășurați elementele centrate cu un părinte care folosește poziționarea relativă, absolută sau fixă. Dat fiind că elementele absolut poziționate nu afectează înălțimea sau lățimea părinților, veți dori, de asemenea, să setați înălțimea și lățimea elementului părinte pentru a se potrivi.
De exemplu, adăugați stânga: centru; la .cerc clasa pe care ați creat-o mai devreme, astfel încât va fi centrat orizontal:
.cerc cerc: 8rem # c00; stânga: centru;
Apoi adăugați această a doua clasă pentru a acționa ca un înveliș în jurul cercului, dându-i o poziționare relativă și o înălțime care se potrivește cu cercul:
.circle_wrap position: relative; înălțime: 8rem;
Acum adăugați un element care poartă această clasă ca un înveliș în jurul cercului dvs. existent html:
Când vă întoarceți și actualizați pagina, ar trebui să vedeți că cercul dvs. a fost centrat pe orizontală:
Citiți mai multe despre centrul postcss la: https://github.com/jedmao/postcss-center
Ieșire Clearfix într-o singură linie
În orice design care încorporează flotoare, crearea unei clase clare este atât de la îndemână încât este doar esențială. Plugin-ul postcss-clearfix al lui Sean King transformă crearea acelui stil de clarificare într-o lucrare cu o singură linie, adăugând repara ca valoare posibilă care poate fi utilizată cu clar proprietate.
Pentru o corecție clară care va funcționa pe IE8 +, adăugați următoarele în fișierul "src / style.css":
.clarificat clar: fix;
La compilare, veți vedea că a produs următorul cod de clarificare, gata de utilizare:
.clarificat: după content: "; display: table; clear: ambele;
Dacă aveți nevoie de o clarificare clară care va funcționa pe IE6 +, utilizați valoarea fix-moștenire în loc de clar repara, ca astfel:
.clearfixed_legacy clar: fix-moștenire;
Când acest cod este compilat, veți vedea că acesta include un mic conținut suplimentar care îl face prietenos cu browserele moștenite:
.clarfixed_legacy: înainte, .clearfixed_legacy: după content: "; display: table; .clearfixed_legacy: după clear: both; .clearfixed_legacy zoom: 1;
Citiți mai multe despre postcss-clearfix la: https://github.com/seaneking/postcss-clearfix
Setați poziționarea într-o singură linie
Când doriți să utilizați poziționarea non-implicită, adică. absolut, fix sau rudă, trebuie să tastați valorile elementului top, dreapta, fund și stânga poziționarea manuală. Nu există o stenogramă pe care să o folosiți atunci când setați margini sau plăcuțe într-o singură linie. Asta este până când instalați plug-ul postcss Sean King.
Cu acest plugin, atunci când utilizați poziţie proprietate, după stabilirea unei valori absolut / fix / rudă, poți declara top, dreapta, fund și stânga valori în aceeași linie.
Adăugați următorul exemplu de cod în fișierul "src / style.css":
.absolută poziție: absolut 1rem 1rem 0 0;
După compilare, veți vedea că scurta scurtă a fost compilată în liniile separate pe care ar trebui să le tipăriți manual.
Modul în care sunt declarate aceste valori este cu același model ca și în margine sau umplutură , de exemplu, puteți seta deasupra și de jos în prima valoare, apoi în dreapta și în stânga în a doua valoare, sau puteți seta o valoare pentru a aplica la toate cele patru.
Citiți mai multe despre poziția Postcss la: https://github.com/seaneking/postcss-position
Setați lățimea și înălțimea o dată
Plugin-ul de dimensiuni postcss de Andrey Sitnik vă permite să răsfoiți utilizările frecvent utilizate lăţime și înălţime proprietăți în jos într-un singur mărimea proprietate. Puteți să o utilizați în două moduri: trecerea a două valori cu prima valoare de evaluare la lățime și cea de-a doua cu înălțimea sau trecerea unei valori care va fi utilizată atât pentru lățime cât și pentru înălțime.
Testați acest lucru prin adăugarea următorului CSS în fișierul "src / style.css":
.size_a size: 1rem 2rem; .size_b size: 1rem;
La compilare, ar trebui să vedeți acest cod acum în fișierul "dest / style.css":
Citiți mai multe despre dimensiunea postcss la: https://github.com/postcss/postcss-size
Setați spațierea verticală și orizontală
Ca un mare iubitor de codificare eficientă, când scriu margini și umpluturi, care sunt adesea egale pe două părți, m-am trezit frecvent dorind să existe o scurtătură pentru a declara spațierea verticală și orizontală dintr-o dată. Am scris chiar și câteva mixere preprocesor pentru a face asta. Dar nu voi mai avea nevoie de acele mixuri datorită pluginului postcss-verthorz de David Hemphill.
Cu acest plugin puteți utiliza padding-vert sau Marja de-vert pentru a seta spațierea verticală și padding-HORZ sau Marja de-HORZ pentru a seta spațierea orizontală. Adăugați următorul exemplu de cod în fișierul "src / style.css" pentru a vedea acest lucru:
De asemenea, puteți scurta aceste proprietăți și mai mult prin abrevierea acestora la două litere. Codul de exemplu pe care l-am folosit mai sus ar putea fi abreviat la următoarele și rezultatul ar fi exact același:
.spacing_short pv: 1rem; mh: 2rem;
Citiți mai multe despre postcss-verthorz la: https://github.com/davidhemphill/postcss-verthorz
Codurile culorilor de ieșire
Culoarea preferată a textului meu implicit este # 232323 și nu știu dacă sunt doar eu, dar mă plictisesc să fac din aceleași două cifre din nou și din nou. Am dorit de multe ori să existe o scurtătură, similar cu modul în care poți să te descurci #FFFFFF până la #fff. Cu plugin-ul postcss-color-short de Andrey Polischuk, există.
Când utilizați acest plugin, dacă setați un cod de culoare de două cifre, aceste cifre vor fi repetate până când va fi creat un cod de șase cifre, de ex. # 23 va deveni # 232323. Dacă setați un cod de culoare dintr-o singură cifră, acesta va fi repetat până când nu există trei cifre, de ex. #F va deveni #fff. Puteți chiar să-l utilizați pentru a seta RGBA () culori, unde prima cifră pe care o parcurgeți se va repeta de trei ori, iar a doua va fi folosită ca valoare alfa, de ex. rgba (0, 0,5) va deveni rgba (0, 0, 0, 0,5).
Adăugați următoarele în fișierul "src / style.css" pentru a încerca toate cele de mai sus:
Citiți mai multe despre postcss-color-short la: https://github.com/andrepolischuk/postcss-color-short
Rezumând
Să recapitulăm repede tot ce am trecut în acest tutorial:
Sarcini mici de codificare în fiecare zi nu par a fi mult mai individual, dar se adaugă până la o cantitate uriașă de timp în ansamblu, astfel încât scurtarea lor poate fi utilă
Plugin-ul postcss-alias vă permite să creați propriul dvs. stenogramă pentru proprietăți
Plugin-ul postcss-crip are sute de stenograme predefinite de proprietate
Postcss-font-magician vă permite să utilizați fonturi personalizate ca și cum ar fi fonturi implicite, generând automat @ Font-face cod pentru tine
Cercurile postcss-cerc și postcss-triunghiul fac ca cercurile și triunghiurile CSS să fie create direct și intuitiv
Pluginul postcss-all-link-colors vă permite să transmiteți simultan culori pentru toate stările de legătură
Pluginul postcss-center oferă centrarea verticală și orizontală cu top: centru; și stânga: centru;
Pluginul postcss-clarfix vă permite să ieșiți din codul cu clarfix clar: fix;
Pluginul postcss-position vă permite să vă adăugați top, dreapta, fund și stânga setări ca parte a utilizării de către dvs. a poziţie proprietate
Pluginul de dimensiune postcss vă permite să setați lățimea și înălțimea simultan
Pluginul postcss-verthorz permite distanțarea orizontală și spațierea verticală să fie afișate cu reguli unice.
Pluginul postcss-color-short vă oferă posibilitatea de a utiliza hexodocuri cu o singură cifră și două cifre și alte comenzi rapide de culoare.
În Următorul tutorial
În tutorialul următor vom trece pe plugin-uri care sunt minunate, dar nu se încadrează într-o anumită categorie. Ne vedem curând în "Diverse bunuri".
Share
Accentsconagua
