Jednostavan i jednostavan vodič za razumijevanje Sassa
Prije nekog vremena Thoriq Firdaus napisao je sjajan članak o početku rada sa Sassom koji vam je pokazao kako instalirati i koristiti ovaj vrlo koristan jezik CSS-a (možda želite provjeriti, znate, za početak).
U ovom članku pomislio sam da ću vam dati malo više uvida u ono što možete učiniti sa Sassom i kako ga programeri koriste svaki dan kako bi stvorili bolji i modularniji CSS kod. Preskočite naprijed do željenog odjeljka:
- Alati trgovine
- Varijable
- traženje gnijezda
- Proširivanje skupova pravila
- Mixins
- Selektori rezerviranog mjesta
- operacije
- funkcije
Alati trgovine
Thoriq vam je pokazao kako možete koristiti Sass iz naredbenog retka koristeći sass - sat naredba.
Ako više volite GUI alate, možete ići s mojom osobnom omiljenom aplikacijom, Codekit, web developer alatom za kompajliranje Sassa, ulančavanjem, autoprefixingom i još mnogo toga. Prepros je još jedna vrlo sposobna aplikacija koja se može koristiti na svim sustavima. Obojica su plaćene aplikacije ali vrijedi ako ih koristite na duge staze.
Ako samo želite isprobati Sass bez plaćanja bilo čega možete koristiti terminal, ili Koala (ovdje je naš pregled), besplatnu aplikaciju bogatu među-platformama, koja može zadržati svoje mjesto protiv premijskih partnera.
Varijable
Jedna od prvih stvari koju trebate zamotati je varijable. Ako dolazite iz PHP ili sličnog pozadinskog jezika kodiranja, to će vam biti druga priroda. Varijable su za pohranjivanje bitova i dijelova informacija za višekratnu upotrebu, kao vrijednost boje, na primjer:
$ primary_color: # 666666; .button color: $ primary_color; . važan color: $ primary_color;
Ovo se možda ne čini korisnim ovdje, ali zamislite da imate 3000 linija koda. Ako se vaša shema boja promijeni, trebat ćete zamijeniti svaku vrijednost boje u CSS-u. S Sassom možete izmijenite vrijednost od $ primary_color varijabla i to s njom.
Za varijable se koristi pohranjivanje naziva fontova, veličina, boja i niza drugih informacija. Za veće projekte vrijedi vađenje svih varijabli u zasebnu datoteku (uskoro ćemo vidjeti kako se to radi). To vam omogućuje da promijenite boju cijelog projekta i promijenite fontove i druge ključne aspekte bez dodirivanja stvarnih CSS pravila. Sve što trebate učiniti je izmijeniti neke varijable.
traženje gnijezda
Još jedna osnovna značajka koju vam daje Sass je mogućnost gniježđenja pravila. Pretpostavimo da stvarate navigacijski izbornik. Imate nav element koji sadrži neuredan popis, stavke popisa i veze. U CSS-u možete učiniti nešto poput ovoga:
#header nav / * Pravila za navigacijsko područje * / #header nav ul / * Pravila za izbornik * / #header nav li / * Pravila za stavke popisa * / #header nav a / * Pravila za veze * /
U selektorima se mnogo ponavljamo. Ako elementi imaju zajedničke korijene, možemo koristiti gniježđenje napišite naša pravila na mnogo čistiji način.
Evo kako gornji kod može izgledati u Sassu:
#header nav / * Pravila za navigacijsko područje * / ul / * Pravila za izbornik * / li / * Pravila za stavke popisa * / a / * Pravila za veze * /
Gniježđenje je iznimno korisno zbog toga čini stilske listove (puno) čitljivijima. Koristeći gniježdenje zajedno s odgovarajućim uvlačenjem možete postići visoko čitljive strukture kodova, čak i ako imate poštenu količinu koda.
Jedan nedostatak gniježđenja je da može dovesti do nepotrebne specifičnosti. U gornjem primjeru naveo sam veze s #header nav a. Također možete koristiti #header nav ul li a što bi vjerojatno bilo previše.
U Sassu je mnogo lakše biti vrlo specifičan jer sve što trebate učiniti je ugnijezditi svoja pravila. Sljedeće je daleko manje čitljivo i vrlo specifično.
#header nav / * Pravila za navigacijsko područje * / ul / * Pravila za izbornik * / li / * Pravila za stavke popisa * / a / * Pravila za veze * /
Proširivanje skupova pravila
Proširenje će biti poznato ako radite s objektno orijentiranim jezicima. To je najbolje razumjeti kroz primjer, stvorimo 3 gumba koja su male varijacije jedna od druge.
.gumb display: inline-block; boja: # 000; pozadina: # 333; granična radijus: 4 piksela; obloga: 8px 11px; .button-primary @extend .button; pozadina: # 0091C2 gumb-mali @extend .button; font-size: 0.9em; obloga: 3px 8px;
.Gumb-primarna i .Gumb-mala sve klase proširuju .dugme što znači da oni preuzimaju sva njegova svojstva, a zatim definiraju svoje.
To je iznimno korisno u mnogim situacijama gdje se mogu koristiti varijacije elementa. Poruke (upozorenje / uspjeh / pogreška), gumbi (boje, veličine), vrste izbornika itd. Mogu koristiti proširenje za veliku učinkovitost CSS-a.
To je jedno upozorenje neće raditi u medijskim upitima kao što biste očekivali. Ovo je malo naprednije, ali možete pročitati sve o tom ponašanju u Understanding Placeholder Selectors - selektori rezerviranih mjesta su posebna vrsta proširenja o kojoj ćemo uskoro razgovarati..
Mixins
Mixins su još jedna omiljena značajka korisnika procesora. Mixins su ponovno upotrebljivi skupovi pravila - savršeni za pravila specifična za dobavljače ili za skraćivanje dugih CSS pravila.
Kako o kreiranju prijelaznog pravila za elemente hover:
@mixing hover-effect -webkit-transition: pozadinska boja 200ms; -moz-prijelaz: pozadinska boja 200ms; -o-prijelaz: pozadinska boja 200ms; prijelaz: pozadinska boja 200ms; uključiti hover-efekt; . gumb @ uključi hover-efekt;
Mixins također omogućuju korištenje varijabli definirajte vrijednosti unutar mješavine. Mogli bismo preraditi gore navedeni primjer dati nam kontrolu nad točnim vremenom tranzicije. Možda ćemo, primjerice, htjeti prijeći gumbe na malo sporije.
@mixin hover-effect ($ speed) -webkit-transition: pozadinska boja $ speed; -moz-prijelaz: pozadinska boja $ speed; -o-prijelaz: pozadinska boja $ brzine; prijelaz: pozadinska boja $ brzine; uključiti hover-efekt (200ms); . gumb @ uključi hover-efekt (300ms);
Selektori rezerviranog mjesta
Session 3.2 uveden je s selektorom mjesta i riješio problem koji bi mogao uzrokovati malo nadutosti u generiranom CSS kodu. Pogledajte ovaj kod koji stvara poruke o pogrešci:
.poruka font-size: 1.1em; padding: 11px; granica širine: 1 piksela; border-style: krutina; .poruka o opasnosti @extend .message; pozadina: # C20030; boja: #fff; border-color: # A8002A; .usluga-uspjeh @extend .message; pozadina: # 7EA800; boja: #fff; border-color: # 6B8F00;
Vrlo je vjerojatno da se klasa poruka nikada neće koristiti u našem HTML-u: bila je stvorena da bude proširena, ne koristi se kao što je. To uzrokuje malo nadutosti u generiranom CSS-u. Da bi vaš kod bio što učinkovitiji, možete koristiti selektor odabira mjesta koji je označen znakom postotka:
% poruka font-size: 1.1em; padding: 11px; granica širine: 1 piksela; border-style: krutina; .poruka-opasnost @extend% gumb; pozadina: # C20030; boja: #fff; border-color: # A8002A; . uspjeh poruke @extend%; pozadina: # 7EA800; boja: #fff; border-color: # 6D9700;
U ovoj fazi možda se pitate kakva je razlika između produženja i miješanja. Ako koristite rezervirana mjesta, ponašaju se kao mješavina bez parametara. To je istina, ali izlaz u CSS-u se razlikuje. Razlika je u tome mixins udvostručuje pravila dok rezervirana mjesta osigurat će da ista pravila dijele selektore, što rezultira manje CSS-a na kraju.
operacije
Teško je odoljeti dosjetki, ali za sada ću se suzdržati od bilo kakvih medicinskih šala. Operateri vam omogućuju da napravite neke matematike u svom CSS kodu i mogu biti prilično korisni. Primjer u vodiču Sass savršen je za prikazivanje sljedećeg:
.posuda širina: 100%; članak float: lijevo; širina: 600px / 960px * 100%; na stranu float: desno; širina: 300px / 960px * 100%;
Gornji primjer stvara sustav rešetke na bazi 960px s minimalnim gnjavažama. Kompilirati će se na sljedeći CSS:
.posuda širina: 100%; članak float: lijevo; širina: 62,5%; na stranu float: desno; širina: 31,25%;
Jedno veliko korištenje za operacije je zapravo miješanje boja. Ako pogledate poruku uspjeha Sassa iznad, nije jasno da boja pozadine i granice imaju neku vrstu veze. Ako oduzmemo nijansu sive boje možemo potamniti boju, čineći vezu vidljivom:
$ primarni: # 7EA800; .usluga-uspjeh @extend% gumb; pozadina: $ primary; boja: #fff; border-color: $ primary - # 111;
Svjetlije oduzete boje, što je tamnija rezultirajuća nijansa. Lakša je dodana boja, a svjetlija je rezultirajuća nijansa.
funkcije
Postoji velik broj funkcija za korištenje: funkcije brojeva, funkcije niza, funkcije popisa, funkcije boja i još mnogo toga. Pogledajte dugačak popis u dokumentaciji razvojnog programera. Ovdje ću pogledati par samo da bih vam pokazao kako oni rade.
osvijetliti i potamnjeti Funkcija se može koristiti za promjenu svjetline boje. To je bolje nego oduzimanje nijansi, sve čini još modularnijim i očiglednijim. Pogledajte naš prethodni primjer pomoću funkcije zatamnjenja.
$ primarni: # 7EA800; .usluga-uspjeh @extend% gumb; pozadina: $ primary; boja: #fff; border-color: zatamni ($ primary, 5);
Drugi argument funkcije je postotak potrebnog zatamnjenja. Sve funkcije imaju parametre; pogledajte dokumentaciju kako biste vidjeli što je to! Evo nekoliko drugih funkcija boja koje su same po sebi razumljive: Desaturate, zasititi, izokrenuti, u sivim tonovima.
staviti strop funkcija, kao u PHP-u, vraća broj zaokružen na sljedeći cijeli broj. To se može koristiti pri izračunu širine stupaca ili ako ne želite koristiti mnogo decimalnih mjesta u konačnom CSS-u.
.title font-size: ceil ($ header_size * 1.3314);
Pregled
Značajke u Sassu daju nam veliku moć za bolje pisanje CSS-a uz manje napora. Pravilna upotreba mješavina, proširenja, funkcija i varijabli učinit će naše stilove više održivim, čitljivijim i lakšim za pisanje.
Ako vas zanima još jedan sličan CSS predprocesor, predlažem da pogledate LESS (ili provjerite vodič za početnike) - temeljna je glavnica gotovo jednaka!
