Čo je Sass? Zistite, ako používať tento jazyk rozšírenia CSS

Syntakticky úžasné štýly (Sass) sú populárnym jazykom rozšírenia CSS. Jazyk existuje už asi 15 rokov. Funguje dobre s každou verziou CSS, vďaka čomu je kompatibilný s každou knižnicou CSS a rámcom, od Bootstrapu po Foundation.

Jazyk vám umožňuje napísať kód Sass a potom tento kód skompilovať do CSS. Hodnota používania Sass namiesto obyčajného CSS je v tom, že poskytuje ďalšie funkcie, ktoré sú v súčasnosti mimo rozsahu CSS.

V tomto návode sa naučíte používať Sass a jeho najdôležitejšie funkcie.

Inštalácia Sass

Existuje niekoľko spôsobov, ako používať Sass na vašom zariadení. Patrí medzi ne spustenie aplikácie (napríklad LiveReload alebo Scout-App), sťahovanie Sass z GitHubualebo si ho nainštalujete pomocou npm.

Inštalácia Sass s npm

Ak chcete nainštalovať Sass pomocou npm, musíte to urobiť nainštalujte NodeJS a npm na vašom zariadení. Potom budete musieť vytvoriť a package.json súbor (čo je dobrá prax pri inštalácii akéhokoľvek balíka npm vo vašich projektoch). Môžete vytvoriť základnú package.json súbor v adresári projektu pomocou nasledujúceho príkazu terminálu:

npm init -y

Vykonaním tohto príkazu sa vygeneruje súbor package.json s nasledujúcim obsahom:

{
 "name": "moja_aplikácia",
 "version": "1.0.0",
 "popis": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Chyba: nebol zadaný žiadny test\" && ukončenie 1"
 },
 "Kľúčové slová": [],
 "autor": "",
 "licencia": "ISC"
}

The package.json je dôležitý, pretože slúži ako konfigurácia pre váš projekt. Zakaždým, keď nainštalujete nový balík npm, package.json súbor to bude odrážať.

Teraz môžete nainštalovať Sass vložením nasledujúceho príkazu do terminálu:

npm nainštalujte sass

Tento príkaz aktualizuje súbor package.json súbor vytvorením nového pole závislosti, ktorý bude obsahovať nový balík Sass. Vygeneruje tiež nový package-lock.json súbor a nainštalujte sass (plus závislosti) do a node_modules adresár.

Rôzne typy súborov Sass

Súbor Sass môže mať jednu z dvoch prípon, .sass alebo .scss. Hlavný rozdiel medzi nimi je v tom, že .scss súbor používa zložené zátvorky a bodkočiarky (podobne ako CSS), zatiaľ čo súbor .sass súborové štruktúry CSS pomocou odsadenia (podobne ako Python). Niektorí vývojári radšej používajú .scss súbor, pretože jeho štruktúra je bližšia CSS.

Príklad súboru .scss

$primary-color: blue;
telo {
 farba: $primary-color;
 p {
 farba: červená;
 }
}

Príklad súboru .sass

$primary-color: blue
telo
 farba: $primary-color
 p
 farba: červená

Kompilácia súboru Sass do CSS

Individuálny súbor Sass môžete zostaviť pomocou sass program príkazového riadku:

sass súbor.scss > súbor.css

Sass môžete spustiť aj vo všetkých súboroch v konkrétnom adresári:

sass scss: dist/css/

Tento príkaz skompiluje všetky súbory Sass v rámci scss adresár a uloží výsledné súbory dist/css.

Ak používate npm, môžete nastaviť pohodlnú skratku pre kompiláciu sass pomocou skripty pole vo vašom package.json súbor:

"scripts": {
 "test": "echo \"Chyba: nie je zadaný žiadny test\" && ukončenie 1",
 "sass": "sass --sleduj scss: dist/css/"
 },

Táto konfigurácia využíva -- sledujte možnosť. Udržuje sass v chode a zabezpečuje, že tieto súbory prekompiluje vždy, keď sa zmenia. Pre každý súbor sass vygeneruje a .css a a .css.mapa súbor.

Ak chcete spustiť skript Sass vyššie, musíte vo svojom termináli vykonať nasledujúci príkaz:

npm spustiť sass

Spustenie tohto príkazu vygeneruje výstup podobný tomuto:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --sleduj scss: dist/css/
Kompilované scss\main.scss do dist\css\main.css.
Sass sleduje zmeny. Pre zastavenie stlačte Ctrl-C.

Sass premenné

Dnes môžete vytvárať premenné v CSS, ale pred 15 rokmi premenné CSS neexistovali, takže podpora Sass pre ne bola cenná. Premenné Sass fungujú v podstate rovnakým spôsobom ako premenné CSS. Ukladajú hodnoty (napríklad farby), ktoré chcete použiť v súbore CSS. Jednou z hlavných výhod premenných je, že vám umožňujú aktualizovať mnoho výskytov hodnoty ich zmenou na jednom mieste.

Každá premenná Sass začína znakom dolára, za ktorým nasleduje ľubovoľná kombinácia znakov. Pokúste sa, aby boli vaše premenné popisné, ako napr $primary-color príklad vyššie. Je dôležité poznamenať, že premenná Sass sa nekompiluje do premenných CSS. Napríklad tento súbor .scss:

$primary-color: blue;
telo {
 farba: $primary-color;
}

Skompiluje sa do nasledujúceho CSS:

telo {
 farba: modrá;
}

Ako môžete vidieť zo súboru vyššie, neexistujú žiadne premenné CSS. Výhodou premenných je, že každá zmena vykonaná v súbore Sass aktualizuje zodpovedajúci súbor CSS.

Sass Mixins

Ak máte jednu vlastnosť, ktorú chcete v projekte použiť niekoľkokrát, potom je premenná skvelá. Ale ak máte skupinu vlastností, ktoré chcete použiť ako jednotku, mix vám pomôže.

Každé miešanie začína s @mixin kľúčové slovo, za ktorým nasleduje názov, ktorý chcete mixu priradiť. Máte možnosť odovzdať premenné do mixinu ako parametre a použiť tieto premenné v tele mixinu, v podstate rovnakým spôsobom ako funkciu.

Použitie mixéra

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
 rodina písiem: 'Franklin Gothic Medium', 'Arial Narrow', Arial, bezpätkové;
 background-color: $primary-color;
 farba: $secondary-color;
}
#Domov {
 @include light-theme (modrá);
}

Prvá vec, ktorú si môžete všimnúť v kóde vyššie, je, že mixin akceptuje dva argumenty. Argumentom môžete priradiť predvolené hodnoty a pri ich zahrnutí ich prepísať.

Po vytvorení mixu ho môžete použiť v ktorejkoľvek sekcii na vašom webe pomocou @include kľúčové slovo, za ktorým nasleduje názov mixinu.

Kompilácia kódu Sass vyššie vygeneruje v cieľovom súbore nasledujúci kód CSS:

#Domov {
 rodina písiem: "Franklin Gothic Medium", "Arial Narrow", Arial, bezpätkové;
 farba pozadia: modrá;
 farba: #2c2c2c;
}

Sass funkcie

Okrem rôznych kľúčových slov je hlavným rozdielom medzi funkciou a mixinom to, že funkcia musí niečo vrátiť. Funkcie Sass môžete použiť na výpočet hodnôt alebo vykonávanie operácií.

@function add-numbers($num-one, $num-dva){
 $sum: 0;
 $suma: $num-jedna + $num-dva;
 @return $sum 
}

Táto funkcia akceptuje dve čísla a vráti ich súčet. Funkcie Sass môžu dokonca obsahovať príkazy if, cykly for a iné príkazy riadiaceho toku.

Sass moduly

Ak by ste museli zahrnúť všetky svoje premenné, mixiny a funkcie do toho istého súboru, pri vytváraní veľkých aplikácií by ste mali obrovský súbor Sass. Moduly poskytujú spôsob, ako rozdeliť veľké súbory na menšie, ktoré sass kombinuje počas kompilácie. Môžete mať napríklad funkčný modul a modul mixin, všetko, čo si musíte zapamätať, je @použitie kľúčové slovo.

Tu je príklad, ktorý ukazuje, ako môžete rozdeliť predchádzajúci mixin do vlastného súboru:

Súbor mixins.scss

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
 rodina písiem: 'Franklin Gothic Medium', 'Arial Narrow', Arial, bezpätkové;
 background-color: $primary-color;
 farba: $secondary-color;
}

Súbor main.scss

@použite 'mixins';
#Domov{
 @include mixins.light-theme;
}

Ak chcete importovať a použiť externý súbor ako modul, budete musieť použiť @použitie kľúčové slovo na import. Potom, ak chcete použiť špecifický mix z importovaného súboru, pridajte pred názov konkrétneho mixinu názov súboru, za ktorým nasleduje bodka. Kompilácia vyššie uvedených súborov vygeneruje nasledujúci kód CSS:

#Domov {
 rodina písiem: "Franklin Gothic Medium", "Arial Narrow", Arial, bezpätkové;
 farba pozadia: biela;
 farba: #2c2c2c;
}

Použite Sass na rozšírenie a usporiadanie svojich CSS

Sass je rozšírením syntaxe CSS. Umožňuje vám zefektívniť predlohy štýlov a efektívnejšie ich spravovať. Stále však budete musieť ovládať CSS a princípy webdizajnu, aby ste vytvorili efektívne návrhy.

Tento článok vás naučí, ako nainštalovať a používať Sass. Naučili ste sa vytvárať premenné, mixiny, funkcie a moduly Sass. Teraz vám zostáva len vytvoriť dokument HTML a sledovať, ako váš kód Sass ožije.

8 základných CSS tipov a trikov, ktoré by mal vedieť každý vývojár

Prečítajte si ďalej

O autorovi