Jednoduchý a ľahký sprievodca na pochopenie Sass
Pred chvíľou Thoriq Firdaus napísal skvelý článok o tom, ako začať s Sassom, ktorý vám ukázal, ako nainštalovať a používať tento veľmi užitočný CSS preprocesorový jazyk (možno by ste to chceli pozrieť, viete, aby ste mohli začať).
V tomto článku som si myslela, že vám poskytnem trochu viac informácií o tom, čo môžete robiť so Sassom a ako to vývojári každý deň používajú na vytvorenie lepšieho a modulárnejšieho kódu CSS. Presuňte sa na požadovanú sekciu:
- Obchodné praktiky
- premenné
- hniezdenia
- Rozšírenie súborov pravidiel
- Mixins
- Výber zástupcov
- operácie
- funkcie
Obchodné praktiky
Thoriq vám ukázal, ako môžete použiť Sass z príkazového riadku pomocou sass - watch príkaz.
Ak dávate prednosť nástrojom GUI, môžete ísť s mojou osobnou obľúbenou aplikáciou, Codekit, nástrojom na vývoj webových aplikácií pre kompiláciu Sass, zlučovanie, autoprefixovanie a oveľa viac. Prepros je ďalšou veľmi schopnou aplikáciou, ktorá môže byť použitá na všetkých systémoch. Obidvaja sú platených žiadostí ale stojí za to, ak ich budete dlhodobo používať.
Ak chcete vyskúšať Sass bez platenia za nič môžete používať terminál alebo Koala (tu je náš prehľad), bezplatná aplikácia bohatá na viaceré platformy s funkciami bohatou na funkcie, ktorá dokáže vydržať proti prémiovým partnerom.
premenné
Jedna z prvých vecí, ktorú budete musieť zabaliť do hlavy, sú premenné. Ak pochádzate z jazyka PHP alebo iného podobného kódovacieho jazyka, bude to pre vás druhá príroda. Premenné sú pre ukladanie bitov a častí opakovane použiteľných informácií, napríklad hodnota farby, napríklad:
$ primary_color: # 666666; .button color: $ primary_color; . dôležité color: $ primary_color;
Možno to zrejme nie je užitočné, ale predstavte si, že má 3000 riadkov kódu. Ak sa zmení farebná schéma, musíte nahradiť každú hodnotu farby v CSS. S Sassom môžete jednoducho upravte hodnotu z $ primary_color premennú a urobiť s ňou.
Premenné sa používajú pre ukladanie názvov písiem, veľkostí, farieb a množstva ďalších informácií. V prípade väčších projektov by sme si mali vyťažiť všetky vaše premenné do samostatného súboru (pozrite sa, ako sa to čoskoro uskutoční). Čo vám to umožní urobiť, je obnoviť celý svoj projekt a zmeniť písma a iné kľúčové aspekty bez toho, aby sa nikdy dotkli aktuálnych pravidiel CSS. Všetko, čo musíte urobiť, je zmeniť niektoré premenné.
hniezdenia
Ďalšou základnou funkciou, ktorú vám Sass dáva, je schopnosť hniezdiť pravidlá. Predpokladajme, že vytvárate navigačné menu. Máš nav prvok, ktorý obsahuje nezoradený zoznam, zoznam položiek a odkazov. V službe CSS môžete urobiť niečo takéto:
#header nav / * Pravidlá pre oblasť nav * / #header nav ul / * Pravidlá pre menu * / #header nav li / * Pravidlá pre položky zoznamu * / #header nav a / * Pravidlá pre odkazy * /
V selektoroch sa opakujeme sami. Ak prvky majú spoločné korene, môžeme použiť hniezdenie napíšte naše pravidlá čistejším spôsobom.
Tu je návod, ako môže hore uvedený kód vyzerat v Sass:
#header nav / * Pravidlá pre oblasť nav * / ul / * Pravidlá pre menu * / li / * Pravidlá pre položky zoznamu * / a / / Pravidlá pre odkazy * /
Hniezdenie je veľmi užitočné, pretože vytvára štýly (veľa) čitateľnejšie. Použitím hniezdenia spolu s správnym odsadením môžete dosiahnuť vysoko čitateľné kódové štruktúry, aj keď máte spravodlivé množstvo kódu.
Jednou nevýhodou hniezdenia je, že môže vedú k zbytočnej špecifikácii. V príklade hore som odkazoval na odkazy s #header nav a. Môžete tiež použiť #header nav ul a li čo by pravdepodobne bolo príliš veľa.
V spoločnosti Sass je oveľa jednoduchšie byť veľmi špecifický, pretože všetko, čo musíte urobiť, je hniesť vaše pravidlá. Nasledujúce je oveľa menej čitateľné a dosť špecifické.
#header nav / * Pravidlá pre oblasť nav * / ul / * Pravidlá pre menu * / li / * Pravidlá pre položky zoznamu * / a / * Pravidlá pre odkazy * /
Rozšírenie súborov pravidiel
Rozšírenie bude známe, ak pracujete s objektovo orientovanými jazykmi. Najlepšie je pochopiť pomocou príkladu vytvoriť 3 tlačidlá, ktoré sú navzájom nepatrné variácie.
.tlačidlo display: inline-block; farba: # 000; pozadie: # 333; border-radius: 4px; polstrovanie: 8px 11px; .button-primary @extend.button; background: # 0091C2 .button-small @extend .button; font-size: 0.9em; polstrovanie: 3px 8px;
.tlačidlo primárnych a .Tlačidlo-small všetky triedy rozširujú .gombík trieda, čo znamená, že preberajú všetky svoje vlastnosti a potom definujú svoje vlastné.
To je nesmierne užitočné v mnohých situáciách, kde sa môžu používať variácie prvku. Správy (upozornenie / úspech / chyba), tlačidlá (farby, veľkosti), typy ponúk atď. By mohli všetky využiť rozšírenie funkčnosti pre skvelú efektivitu CSS.
Jedna námietka rozšírenia je to nebudú fungovať v mediálnych dopytoch ako by ste očakávali. Toto je trochu pokročilejšie, ale môžete si prečítať všetko o tomto správaní v časti Výber zástupcov zástupcov - zástupcovia zástupcov sú špeciálny druh rozšírenia, o čom budeme čoskoro rozprávať.
Mixins
Mixiny sú ďalšou obľúbenou funkciou používateľov preprocesora. Mixiny sú opakovane použiteľné pravidlá - ideálne pre pravidlá pre konkrétnych dodávateľov alebo pre krátke krátke pravidlá CSS.
Ako vytvoriť prechodové pravidlo pre prvky vznášať sa:
@mixing hover-effect -webkit-transition: background-color 200ms; -moz-transition: farba pozadia 200 ms; -o-prechod: farba pozadia 200 ms; prechod: farba pozadia 200 ms; @include hover-effect; .button @include hover-effect;
Mixiny vám tiež umožňujú používať premenné definujte hodnoty v mixin. Mali by sme prepísať príklad vyššie dajte nám kontrolu nad presným časom prechodu. Možno budeme chcieť, aby tlačidlá prešli trochu pomalšie.
@ mixin hover-effect ($ rýchlosť) -webkit-transition: background-color $ speed; -moz-transition: background-color $ speed; -o-transition: farba pozadia $ speed; prechod: farba pozadia $ rýchlosť; @include hover-effect (200ms); .button @include hover-effect (300ms);
Výber zástupcov
Voliteľné zástupné symboly boli zavedené so softvérom Sass 3.2 a vyriešili problém, ktorý by mohol spôsobiť nadmerné nadúvanie vo vašom vytvorenom kóde CSS. Pozrite sa na tento kód, ktorý vytvára chybové hlásenia:
.správa font-size: 1.1em; padding: 11px; border-width: 1px; border-style: pevná; . správa-nebezpečenstvo @expand. pozadie: # C20030; Farba: #fff; hraničná farba: # A8002A; .správa-úspech @extend .message; pozadie: # 7EA800; Farba: #fff; hraničná farba: # 6B8F00;
Je veľmi pravdepodobné, že trieda správ nebude nikdy použitá v našom jazyku HTML: to bolo vytvorené na rozšírenie, nepoužívané ako také. To spôsobuje trochu nadúvania vo vašom vytvorenom CSS. Ak chcete, aby bol váš kód efektívnejší, môžete použiť zástupný symbol, ktorý je označený percentuálnym znamienkom:
% message font-size: 1.1em; padding: 11px; border-width: 1px; border-style: pevná; . správa-nebezpečenstvo @extend% button; pozadie: # C20030; Farba: #fff; hraničná farba: # A8002A; .správa-úspech @extend% button; pozadie: # 7EA800; Farba: #fff; hraničná farba: # 6D9700;
V tejto fáze sa možno zaujímate, aký je rozdiel medzi rozšírením a mixinom. Ak používate zástupné symboly, správajú sa ako mixin bez parametrov. To je pravda, ale výstup v CSS sa líši. Rozdiel je v tom mixins duplicitné pravidlá zatiaľ čo zástupcovia sa presvedčia, že rovnaké pravidlá zdieľajú selektory, čo má za následok menej CSS na konci.
operácie
Je tu ťažké odolať tu hre, ale teraz sa zdržím žiadnych lekárskych žartov. Operátori vám umožňujú urobiť nejaké matematické údaje vo vašom CSS kóde a môžu vám pomôcť. Príklad v príručke Sass je ideálny pre prezentáciu:
.kontajner šírka: 100%; článok float: left; šírka: 600px / 960px * 100%; stranou float: right; šírka: 300px / 960px * 100%;
Vyššie uvedený príklad vytvára mriežkový systém založený na 960 pixloch s minimálnymi ťažkosťami. Bude to pekne zostavovať na nasledujúci CSS:
.kontajner šírka: 100%; článok float: left; šírka: 62,5%; stranou float: right; šírka: 31,25%;
Jedno skvelé použitie, ktoré môžem nájsť v operáciách, je skutočne kombinovať farby. Ak sa pozriete na správu o úspechu Sass, nie je jasné, či farba pozadia a hranice majú nejaký vzťah. Odčítaním odtieňa šedej môžeme farbu tmavnúť, aby bol vzťah viditeľný:
$ primary: # 7EA800; .správa-úspech @extend% button; pozadie: $ primárne; Farba: #fff; hraničná farba: $ primárna - # 111;
Čím je farba odtiahnutá, tým bude tmavší výsledný odtieň. Ľahšie pridaná farba, čím ľahší výsledný odtieň.
funkcie
Existuje veľký počet funkcií, ktoré môžete používať: číselné funkcie, reťazcové funkcie, funkcie zoznamu, farebné funkcie a ďalšie funkcie. Pozrite sa na dlhý zoznam dokumentácie pre vývojárov. Pozriem sa na pár, aby som vám ukázal, ako fungujú.
uľahčiť a zatemniť funkcia môže byť použitá na zmenu svetlosti farby. Je to lepšie ako odčítanie odtieňov, robia všetko ešte viac modulárne a zrejmé. Pozrite sa na náš predchádzajúci príklad pomocou funkcie stmavnutia.
$ primary: # 7EA800; .správa-úspech @extend% button; pozadie: $ primárne; Farba: #fff; hraničná farba: tmavšia ($ primárna, 5);
Druhým argumentom funkcie je percento požadovaného tmavnutia. Všetky funkcie majú parametre; pozrite dokumentáciu a uvidíte, čo sú! Tu je niekoľko ďalších samozrejmejších farebných funkcií: odfarbyte, saturovať, invertný, v odtieňoch sivej.
opatriť stropom funkcia, rovnako ako v PHP, vráti číslo zaokrúhlené na ďalšie celé číslo. Môžete ho použiť pri výpočte šírky stĺpcov alebo ak nechcete používať mnoho desatinných miest v konečnom CSS.
.názov font-size: ceil ($ title_size * 1.3314);
Prehľad
Funkcie v Sass nám dávajú veľkú silu lepšie napísať lepšiu CSS. Správne používanie zmesí, rozšírení, funkcií a premenných spôsobí, že naše štýly budú udržateľnejšie, čitateľnejšie a ľahšie písať.
Ak máte záujem o iný podobný preprocesor CSS, navrhujem, aby ste sa pozreli na LESS (alebo si pozrite náš sprievodca pre začiatočníkov) - základná istina je v podstate rovnaká!
