Co je Sass? Naučte se používat tento jazyk rozšíření CSS

Syntakticky úžasné šablony stylů (Sass) jsou populární jazyk rozšíření CSS. Jazyk existuje asi 15 let. Funguje dobře se všemi verzemi CSS, takže je kompatibilní s každou knihovnou CSS a frameworkem, od Bootstrapu po Foundation.

Jazyk vám umožňuje napsat kód Sass a poté tento kód zkompilovat do CSS. Hodnota použití Sass místo prostého CSS spočívá v tom, že poskytuje další funkce, které jsou v současné době mimo rozsah CSS.

V tomto tutoriálu se naučíte používat Sass a jeho nejdůležitější funkce.

Instalace Sass

Existuje několik způsobů, jak používat Sass na vašem zařízení. Patří mezi ně spouštění aplikace (jako je LiveReload nebo Scout-App), stahování Sass z GitHubunebo jej nainstalovat pomocí npm.

Instalace Sass s npm

Chcete-li nainstalovat Sass pomocí npm, budete muset nainstalujte NodeJS a npm na vašem zařízení. Poté budete muset vytvořit a package.json soubor (což je dobrá praxe při instalaci libovolného balíčku npm do vašich projektů). Můžete vytvořit základní package.json soubor ve vašem projektovém adresáři pomocí následujícího příkazu terminálu:

npm init -y

Provedením tohoto příkazu se vygeneruje soubor package.json s následujícím obsahem:

{
 "name": "moje_aplikace",
 "version": "1.0.0",
 "popis": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Chyba: nebyl zadán test\" && ukončení 1"
 },
 "klíčová slova": [],
 "autor": "",
 "licence": "ISC"
}

The package.json je důležitý, protože slouží jako konfigurace pro váš projekt. Pokaždé, když nainstalujete nový balíček npm, package.json soubor to bude odrážet.

Nyní můžete nainstalovat Sass vložením následujícího příkazu do terminálu:

npm nainstalovat sass

Tento příkaz aktualizuje package.json vytvořením nového souboru pole závislosti, který bude obsahovat nový balíček Sass. Vygeneruje také nový package-lock.json soubor a nainstalujte sass (plus závislosti) do a node_modules adresář.

Různé typy souborů Sass

Soubor Sass může mít jednu ze dvou přípon, .sass nebo .scss. Hlavní rozdíl mezi nimi je v tom, že .scss soubor používá složené závorky a středníky (podobně jako CSS), zatímco .sass struktury souborů CSS pomocí odsazení (podobně jako Python). Někteří vývojáři dávají přednost použití .scss jeho struktura je bližší CSS.

Příklad souboru .scss

$primary-color: blue;
tělo {
 barva: $primary-color;
 p {
 červená barva;
 }
}

Příklad souboru .sass

$primary-color: blue
tělo
 barva: $primary-color
 p
 červená barva

Kompilace souboru Sass do CSS

Individuální soubor Sass můžete zkompilovat pomocí sass program příkazového řádku:

sass soubor.scss > soubor.css

Sass můžete také spustit napříč všemi soubory v konkrétním adresáři:

sass scss: dist/css/

Tento příkaz zkompiluje všechny soubory Sass v rámci scss adresář a uloží do něj výsledné soubory dist/css.

Pokud používáte npm, můžete nastavit pohodlnou zkratku pro kompilaci sass pomocí skripty pole ve vašem package.json soubor:

"scripts": {
 "test": "echo \"Chyba: nebyl zadán test\" && ukončení 1",
 "sass": "sass --sledujte scss: dist/css/"
 },

Tato konfigurace používá --hodinky volba. Udržuje sass v chodu a zajišťuje, že tyto soubory znovu zkompiluje, kdykoli se změní. Pro každý soubor sass vygeneruje a .css a .css.mapa soubor.

Chcete-li provést výše uvedený skript Sass, musíte ve svém terminálu provést následující příkaz:

npm run sass

Spuštění tohoto příkazu vygeneruje výstup podobný tomuto:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --sledujte scss: dist/css/
Kompilováno scss\main.scss do dist\css\main.css.
Sass sleduje změny. Pro zastavení stiskněte Ctrl-C.

Sass proměnné

Dnes můžete vytvářet proměnné v CSS, ale před 15 lety proměnné CSS neexistovaly, takže podpora Sass pro ně byla cenná. Proměnné Sass fungují v podstatě stejným způsobem jako proměnné CSS. Ukládají hodnoty (jako jsou barvy), které chcete použít v souboru CSS. Jednou z hlavních výhod proměnných je, že vám umožňují aktualizovat mnoho výskytů hodnoty tím, že ji změníte pouze na jednom místě.

Každá proměnná Sass začíná znakem dolaru, po kterém následuje libovolná kombinace znaků. Pokuste se, aby byly vaše proměnné popisné, např $primary-color příklad výše. Je důležité si uvědomit, že proměnná Sass se nekompiluje do proměnných CSS. Například tento soubor .scss:

$primary-color: blue;
tělo {
 barva: $primary-color;
}

Zkompiluje se do následujícího CSS:

tělo {
 barva: modrá;
}

Jak můžete vidět ze souboru výše, neexistují žádné proměnné CSS. Výhodou proměnných je, že jakákoliv změna provedená v souboru Sass aktualizuje odpovídající soubor CSS.

Sass Mixins

Pokud máte jednu vlastnost, kterou chcete v projektu použít několikrát, pak je proměnná skvělá. Ale pokud máte skupinu vlastností, které chcete použít jako jednotku, mixin vám pomůže.

Každý mix začíná s @mixin klíčové slovo a za ním název, který chcete mixinu přiřadit. Máte možnost předat proměnné mixinu jako parametry a použít tyto proměnné v těle mixinu, v podstatě stejným způsobem jako funkci.

Pomocí Mixinu

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

První věc, které si můžete všimnout v kódu výše, je, že mixin přijímá dva argumenty. Argumentům můžete přiřadit výchozí hodnoty a přepsat je, když je zahrnete.

Poté, co vytvoříte svůj mixin, můžete jej použít v jakékoli sekci na vašem webu pomocí @zahrnout klíčové slovo následované názvem mixinu.

Kompilace kódu Sass výše vygeneruje v cílovém souboru následující kód CSS:

#Domov {
 rodina písem: "Franklin Gothic Medium", "Arial Narrow", Arial, bezpatkové;
 barva pozadí: modrá;
 barva: #2c2c2c;
}

Funkce Sass

Kromě různých klíčových slov je hlavní rozdíl mezi funkcí a mixinem v tom, že funkce musí něco vracet. Funkce Sass můžete použít k výpočtu hodnot nebo provádění operací.

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

Tato výše uvedená funkce přijímá dvě čísla a vrací jejich součet. Funkce Sass mohou dokonce obsahovat příkazy if, cykly for a další příkazy toku řízení.

Sass moduly

Pokud byste museli zahrnout všechny své proměnné, mixiny a funkce do stejného souboru, měli byste při vytváření velkých aplikací obrovský soubor Sass. Moduly poskytují způsob, jak rozdělit velké soubory na menší, které sass kombinuje během kompilace. Můžete mít například funkční modul a modul mixin, vše, co si musíte pamatovat, je @použití klíčové slovo.

Zde je příklad ukazující, jak můžete rozdělit předchozí mixin do vlastního souboru:

Soubor mixins.scss

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
 rodina písem: 'Franklin Gothic Medium', 'Arial Narrow', Arial, bezpatkové;
 background-color: $primary-color;
 barva: $secondary-color;
}

Soubor main.scss

@use 'mixins';
#Domov{
 @include mixins.light-theme;
}

Chcete-li importovat a používat externí soubor jako modul, budete muset použít @použití klíčové slovo pro import. Poté, chcete-li použít konkrétní mixin z importovaného souboru, přidejte před název konkrétního mixinu název souboru následovaný tečkou. Kompilace výše uvedených souborů vygeneruje následující kód CSS:

#Domov {
 rodina písem: "Franklin Gothic Medium", "Arial Narrow", Arial, bezpatkové;
 barva pozadí: bílá;
 barva: #2c2c2c;
}

Použijte Sass k rozšíření a organizaci vašich CSS

Sass je rozšíření syntaxe CSS. Umožňuje vám zefektivnit vaše šablony stylů a spravovat je efektivněji. Stále však budete muset ovládat CSS a principy webdesignu, abyste mohli vytvářet efektivní návrhy.

Tento článek vás naučí, jak nainstalovat a používat Sass. Naučili jste se vytvářet Sass proměnné, mixiny, funkce a moduly. Nyní vám zbývá pouze vytvořit dokument HTML a sledovat, jak váš kód Sass ožije.

8 základních CSS tipů a triků, které by měl znát každý vývojář

Přečtěte si další

O autorovi