Sass @use & @forward: Modulární architektura pro škálování CSS

Sass: Od zastaralého @import k moderní modulární architektuře s @use a @forward

Ve světě frontend vývoje, kde se projekty stávají stále složitějšími a kódová základna se rozrůstá, nabývá efektivní správa stylů kritického významu. Sass, jako jeden z předních CSS preprocesorů, prošel významnými změnami zaměřenými na zlepšení modularity a udržitelnosti kódu. Klíčovým krokem této evoluce bylo opuštění zastaralé direktivy @import ve prospěch výkonných a flexibilních @use a @forward.

Dlouhou dobu byl @import jediným způsobem, jak zahrnout Sass soubory, ale měl podstatné nevýhody: globální znečištění jmenného prostoru, vysoké riziko konfliktů a duplikaci kódu. S blížícím se vydáním Dart Sass 3.0.0 byl @import oficiálně označen jako zastaralý a bude zcela odstraněn, což činí osvojení nového modulárního systému povinným pro každého moderního vývojáře.

Direktiva @use: Izolace a jmenné prostory

@use je základním prvkem nového modulárního systému Sass. Načte Sass soubor (modul) a zpřístupní jeho obsah (proměnné, mixiny, funkce) v aktuálním souboru, ale zároveň jej izoluje do vlastního jmenného prostoru. To je klíčový rozdíl oproti @import, který zabraňuje globálním konfliktům a činí závislosti explicitními.

Základní použití:

@use 'cesta/k/souboru';

Ve výchozím nastavení se název jmenného prostoru tvoří z poslední části cesty k souboru, bez podtržítek a přípon. Například při použití @use '../helpers/colors'; budou proměnné a funkce z _colors.scss dostupné přes prefix colors.:

// helpers/_colors.scss
$primary: blue;
$secondary: gray;

// components/_button.scss
@use '../helpers/colors';

.button {
  color: colors.$primary; // Přístup přes jmenný prostor "colors"
  background-color: colors.$secondary;
}

Změna jmenného prostoru pomocí as:

Pro usnadnění nebo jasnost lze modulu přiřadit vlastní název pomocí klíčového slova as:

@use 'helpers/colors' as myColors;

.button {
  color: myColors.$primary; // Přístup přes "myColors"
}

Při pojmenovávání jmenných prostorů by se měla dodržovat pravidla pro identifikátory Sass:

• Povoleno: písmena (a-z, A-Z), číslice (0-9, ale ne na začátku), camelCase, PascalCase.
• Nepovoleno: pomlčky (-), mezery, speciální znaky, začínat číslicí.

Použití vestavěných modulů Sass

Sass poskytuje sadu vestavěných modulů pro běžné úkoly, jako jsou matematické operace, práce se seznamy, mapami, barvami a řetězci. Tyto moduly se připojují s prefixem sass::

@use 'sass:math';
@use 'sass:list';
@use 'sass:map';
@use 'sass:color';
@use 'sass:string';

Příklady použití funkcí z vestavěných modulů:

$width: math.div(100%, 3); // Dělení
$len: list.length((10px, 20px, 30px)); // Délka seznamu
$color: color.adjust(#336699, $lightness: 20%); // Korekce barvy
$index: string.index('hello world', 'world'); // Hledání podřetězce

Je důležité si uvědomit, že vestavěné moduly, stejně jako běžné, musí být explicitně připojeny v každém souboru, kde se používají jejich funkce. Nejsou děděny přes jiné importy.

Organizace kódu a přístup k modulům

Modulární systém Sass podporuje přístup, kdy každý SCSS soubor explicitně deklaruje své závislosti na začátku. To zajišťuje transparentnost a zjednodušuje refaktorování. Mixiny a funkce definované v uživatelských souborech jsou také dostupné přes jmenné prostory.

Příklad definice mixinu:

// helpers/_mixins.scss
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

A jeho použití:

// components/_card.scss
@use '../helpers/mixins';

.card {
  @include mixins.flex-center;
}

Doporučená struktura složek:

Dobře strukturovaný Sass projekt může vypadat takto:

scss/
  helpers/
    _colors.scss
    _variables.scss
    _mixins.scss
  components/
    _button.scss
    _card.scss
  pages/
    _about-page.scss
  template.scss // Hlavní soubor pro sestavení

Příklad souboru komponenty, který používá několik modulů:

// components/_button.scss
@use '../helpers/colors' as myColors;
@use '../helpers/variables';
@use '../helpers/mixins';

.button {
  background-color: myColors.$primary;
  padding: variables.$spacing-md;
  @include mixins.border-radius;
}

Výhody modulárního přístupu s jmennými prostory:

• Explicitnost: Okamžitě je vidět, ze kterého modulu pochází proměnná nebo mixin, což zlepšuje čitelnost kódu.
• Žádné konflikty: Izolované jmenné prostory zaručují, že proměnné a mixiny se stejnými názvy v různých modulech nebudou kolidovat.
• Snadné refaktorování: Změny v jednom modulu neovlivňují ostatní, pokud není porušeno jejich API, což zjednodušuje škálování a modifikaci.
• Podpora IDE: Moderní vývojová prostředí lépe pracují s explicitními jmennými prostory a nabízejí přesné automatické doplňování.
• Škálovatelnost: Kódová základna zůstává srozumitelná a spravovatelná i ve velmi velkých projektech.

Konfigurace modulů s @use ... with()

Direktiva @use ... with() poskytuje výkonný mechanismus pro konfiguraci modulů při jejich importu. Umožňuje přepsat proměnné označené jako !default předáním nových hodnot přímo při připojení modulu.

Jak funguje !default:

Proměnná deklarovaná s !default používá svou hodnotu pouze v případě, že nebyla dříve nastavena. Pokud je hodnota již nastavena (například v jiném souboru nebo přes @use ... with()), !default je ignorováno.

// helpers/_theme.scss
$bg-color: #ffffff !default; // Výchozí hodnota
$text-color: #333333 !default; // Může být přepsáno

Přepsání hodnot pomocí with():

Můžete předat nové hodnoty pro !default proměnné v závorkách with() při importu modulu:

// pages/dark-theme.scss
@use '../helpers/theme' with (
  $bg-color: #1a1a1a,
  $text-color: #f0f0f0
);

body {
  background: theme.$bg-color; // Bude #1a1a1a
  color: theme.$text-color; // Bude #f0f0f0
}

Důležité poznámky k with():

• @use ... with() funguje pouze při prvním importu konkrétního modulu v daném souboru. Všechny následné pokusy o import stejného modulu s jinými hodnotami with() budou ignorovány.
• Mnoho externích Sass knihoven používá !default pro svá nastavení, což umožňuje snadno přizpůsobit jejich chování pomocí with().

Direktiva @forward: Vytvoření veřejného API

@forward je direktiva, která umožňuje předávat obsah jednoho nebo více modulů dál, čímž je zpřístupňuje jiným souborům, které importují zprostředkující soubor. Používá se k vytvoření jednotného vstupního bodu (veřejného API) pro sadu modulů, aniž by přitom poskytovala přístup k nim v souboru, kde se používá @forward.

Příklad použití _core.scss jako jednotného vstupního bodu:

// _core.scss
@forward 'helpers/colors';
@forward 'helpers/variables';
@forward 'base/fonts';
@forward 'helpers/mixins';

Nyní, namísto importu každého souboru zvlášť, lze jednoduše připojit _core.scss:

// pages/about-page.scss
@use '../core.scss';

.button {
  color: core.$blue; // Proměnná z helpers/colors
  border-radius: core.$border-radius-medium; // Proměnná z helpers/variables
  @include core.flex-center; // Mixin z helpers/mixins
}

Výhody a nevýhody přístupu s _core.scss:

• Výhoda: Zjednodušuje importy v konečných souborech a vytváří jasné API pro celý projekt.
• Nevýhoda: Všechny předané prvky používají jmenný prostor core (nebo vámi definovaný), což může ztížit určení původního souboru pro konkrétní proměnnou nebo mixin bez prohlížení _core.scss.

Interní použití předávaných modulů:

Pokud je v samotném souboru _core.scss nutné použít proměnné nebo mixiny z předávaných modulů, je nutné je dodatečně importovat pomocí @use:

// _core.scss
@forward 'helpers/colors'; // Předání ven
@use 'helpers/colors' as c; // Pro použití uvnitř _core.scss

body {
  background: c.$bg-color; // Funguje díky @use
}

Pokročilé možnosti @forward:

• Selektivní předávání (show / hide): Umožňuje explicitně určit, které prvky modulu mají být předány.

```scss

@forward 'colors' show $primary, $secondary; // Předat pouze tyto proměnné

@forward 'mixins' hide private-mixin; // Předat vše, kromě private-mixin

```

• Konfigurace pomocí with() při předávání: Podobně jako @use ... with(), lze přepsat !default proměnné v předávaném modulu.

```scss

// helpers/_theme.scss

$bg-color: #fff !default;

// _index.scss (soubor, který bude forward'ovat _theme.scss)

@forward 'theme' with (

$bg-color: #f0f0f0

);

```

Správa závislostí mezi moduly

V modulárním systému Sass musí každý soubor explicitně uvádět své závislosti. To platí i pro případy, kdy jeden váš modul (například _variables.scss) používá proměnné z jiného modulu (_colors.scss). I když jsou _variables.scss a _colors.scss oba předávány přes _core.scss, _variables.scss musí stále explicitně importovat _colors.scss, pokud jej používá.

// _variables.scss
@use 'colors'; // Explicitní závislost na _colors.scss

$button-bg: colors.$primary;

Proč je to důležité:

• Explicitnost: Okamžitě je vidět, na kterých modulech závisí každý soubor, což zjednodušuje pochopení struktury.
• Spolehlivost: Při přesunu nebo reorganizaci souborů zůstávají závislosti neporušené a srozumitelné.
• Podpora IDE: Nástroje pro statickou analýzu a automatické doplňování fungují přesněji.
• Refaktorování: Snadno lze sledovat, kde se používají konkrétní moduly a proměnné.

Co je důležité

• @use a @forward nahrazují zastaralý @import a nabízejí skutečnou modularitu v Sass.
• Jmenné prostory zabraňují konfliktům a činí závislosti explicitními, čímž zlepšují škálovatelnost.
• @use ... with() umožňuje flexibilně konfigurovat moduly přepisováním proměnných označených !default.
• @forward se používá k vytváření jednotných vstupních bodů (veřejných API), což zjednodušuje správu velkého množství modulů.
• Explicitní deklarace závislostí v každém souboru je kriticky důležitá pro udržitelnost a předvídatelnost Sass kódu.

— Editorial Team