Čo je SASS?
SASS je jazyk štýlov, ktorý navrhol Hampton Catlin. Je to skratka pre Syntactically Awesome Style Sheets. Je to skriptovací jazyk pred procesorom, ktorý možno interpretovať alebo skompilovať do kaskádových štýlov. Je to stabilnejšia a výkonnejšia verzia CSS, ktorá štruktúrne popisuje štýl každého dokumentu. SASS je iba rozšírením CSS. Zahŕňa nové funkcie, ako sú premenné, vnorené pravidlá, mixíny, vložené importy, vstavané funkcie, ktoré pomáhajú pri manipulácii s farbami a inými hodnotami. Všetky tieto sú úplne kompatibilné s CSS.
definícia
Je to predprocesor CSS, ktorý pomáha pri znižovaní opakovania s CSS a následne šetrí čas. V porovnaní s CSS sa považuje za stabilnejší a výkonnejší. Veľmi jasne a štrukturálne opisuje štýl dokumentu. Pomáha rýchlejšie a lepšie pracovať. So všetkými jeho vlastnosťami je väčšinou preferovaný pred CSS. Umožňuje definovať premenné, ktoré môžu začínať znakom $. Priradenie premennej je možné vykonať pomocou dvojbodky. Podporuje tiež logické vnorenie, ktoré CSS nie. SASS umožňuje užívateľovi mať vnorený kód, ktorý je možné vložiť do seba.
Pochopenie SASS
SASS je považovaný za výkonný, stabilný a rýchly. Dôvodom je to, že má rozlišovacie vlastnosti, ako sú premenné, hniezdenia, mixíny, atď. Poďme ich prejsť jeden po druhom a lepšie porozumieť SASS.
1. Premenné:
Premenné umožňujú užívateľovi definovať určité hodnoty a znovu ich použiť v celom kóde. Tieto premenné sú podobné ako JavaScript. Ľubovoľnú premennú je možné ľahko definovať pridaním znaku $.
Príklad : $ názov-premennej: premenná-hodnota;
Používateľ môže podľa potreby definovať ľubovoľný počet premenných. Akonáhle sú premenné zostavené, nahradia sa ich skutočnými hodnotami v CSS.
2. Hniezdenie:
Vnorenie pomáha pri definovaní detských selektorov v rodičovských selektoroch. CSS to nepodporuje, a preto vylepšuje kódovací jazyk SASS. Pomáha pri písaní čistejšieho a menej opakujúceho sa kódu.
3. Mixíny:
Mixin je ďalšia užitočná funkcia, ktorá môže znížiť redundanciu a umožňuje opätovné použitie kódu. Je to podobné funkciám, pri ktorých je možné raz definovaný kód opakovane použiť.
4. Časti a dovozy:
Čiastkové súbory sú samostatné súbory, ktoré môžu obsahovať kód, vďaka ktorému je kód modulárny. Pomocou tejto funkcie môžete ľahko získať samostatné súbory pre rôzne komponenty. Názov časti je vždy definovaný pridaním podčiarknutia pred názov.
Ako funguje SASS?
Aby ste dostali kód, musíte použiť predprocesor SASS. Pomáha pri preklade kódu SASS na CSS. Tento proces sa nazýva transponovanie. Je to podobné ako kompilácia, ale namiesto konverzie ľudského relatívneho kódu na strojový kód sa preklad vykonáva z jedného jazyka čitateľného do druhého. Prechod z SASS na CSS je jednoduchý. Všetky premenné, ktoré sú definované v SASS, sa nahradia hodnotami v CSS. To uľahčuje vytváranie a údržbu rôznych súborov CSS pre vašu aplikáciu.
Ako používať SASS?
Nasledujúce kroky vás prevedú najjednoduchším možným spôsobom pomocou SASS.
- Vytvorte ukážkový priečinok kdekoľvek vo vašom systéme.
- V tomto priečinku vytvorte dva priečinky / CSS a / scss.
- Po vytvorení týchto dvoch priečinkov prejdite do priečinka / scss a vytvorte súbor s názvom demo.scss. Táto prípona je scss, čo znamená, že ide o súbor SASS.
- Prejdite na príkazový riadok a prejdite do ukážkového priečinka.
- Keď sa nachádzate v tomto priečinku, budete sledovať, ako sa vaše súbory CSS kompilujú do CSS. Ak chcete sledovať, napíšte príkaz pod:
Sass –watch scss: CSS
Hodinky sú príznakom, ktorý zistí zmenu a zostaví súbor scss do konečného súboru CSS, ktorý sa dá použiť vo vašej aplikácii.
Výhody SASS
- SASS umožňuje užívateľovi napísať čistý kód. Uľahčuje manipuláciu a na zostavenie programu sa používa menej CSS.
- Obsahuje menej kódu, vďaka čomu je ľahšie mať zodpovedajúcu CSS rýchlejšie.
- Je stabilnejšia, výkonnejšia a elegantnejšia. Používajú ho dizajnéri a vývojári a pomáha im pracovať efektívnejšie a rýchlejšie.
- Je kompatibilný s CSS, a preto je možné využívať všetky knižnice CSS.
- Poskytuje zariadenia ako vnorenie, ktoré pomáha pri písaní vnorenej syntaxe a využíva funkcie ako manipulácia s farbami, matematické funkcie a ďalšie hodnoty.
Prečo by sme mali používať SASS?
Nasleduje päť hlavných bodov, prečo by ste mali používať SASS:
- Premenné: Na rozdiel od CSS, kde sa musíte vždy vrátiť a skontrolovať svoje predchádzajúce štýly, SASS obsahuje premenné, ktoré ukladajú informácie a môžu byť znovu použité. V prípade potreby je možné uložiť a použiť všetky hodnoty farieb, balík fontov atď.
- @import: CSS má @import, ktorý vyvoláva všetky ostatné štýly, ale nevytvára ďalšiu požiadavku HTTP. SASS je predprocesor, ktorý stiahne všetky súbory skôr, ako zostaví CSS. Výsledkom je, že stránka CSS je spracovaná jednou požiadavkou HTTP. Požiadavka sa dá rozdeliť na kúsky a prehliadaču sa bude naďalej zobrazovať iba jedna stránka.
- Farebné funkcie: SASS má rôzne funkcie podobné CSS. To všetko sa dá v SASS ľahko použiť.
- @extend: @extend nám umožňuje zdieľať skupinu vlastností CSS z jedného selektora na druhý.
- Mixíny: Mixíny sú vyhlásenia, ktoré je možné použiť na celom webe.
Prečo potrebujeme SASS?
SASS je rýchlejší a efektívnejší. Kód SASS je možné opakovane použiť, a tým šetrí čas. Konverzia kódu z SASS na CSS nie je hektická, a preto je vhodné ho používať, aby sa ušetril čas.
Správne publikum pre výučbu technológií SASS
Každý programátor, ktorý používa CSS a hľadá efektívnejšiu a menej časovo náročnú technológiu na vytváranie webových aplikácií, môže využívať SASS a vyskúšať nové funkcie.
Ako vám táto technológia pomôže rozšíriť svoju kariéru?
Je to pokročilá verzia CSS. Akonáhle budete vedieť, SASS, môžete ľahko získať na voľnej nohe a prácu s veľkými spoločnosťami. Pomáha vám v rýchlejšej práci a ukazuje vám svoje zručnosti pomocou funkcií, ktoré poskytuje.
záver
SASS je veľmi efektívny spôsob nahradenia CSS. Vďaka premenným, vnoreniu, mixovaniu a iným funkciám pomáha pri poskytovaní lepších výsledkov ako CSS. Ak nahradíte CSS za SASS, môžete jednoducho znova použiť svoj kód namiesto toho, aby ste opakovane písali ten istý kus. Preto používajte SASS a staňte sa drzými svojimi aplikáciami.
Odporúčaný článok
Toto bol Sprievodca tým, čo je SASS? Tu sme diskutovali o konceptoch, definícii, práci, výhodách a kariérnom raste spoločnosti SASS. Viac informácií nájdete aj v ďalších navrhovaných článkoch -
- Čo je Bootstrap a ako ho používať?
- Čo je to VMware? Aké je jeho použitie?
- Čo robí aplikačný server?
- Čo je dedičstvo Java?
- Hlavné výhody a nevýhody SAV