Sass 1.105 vrátí načtený modul jako hodnotu, takže šablona sáhne na jeho proměnné i funkce

Překladač stylů Dart Sass vydal 22. září 2026 verzi 1.105.0 a v ní funkci meta.load(). Ta načte soubor se styly podle adresy, která může vzniknout až při překladu, a vrátí ho jako hodnotu nového typu „module“. Šablona pak může číst proměnné načteného souboru, volat jeho funkce a vložit jeho CSS tam, kde ho potřebuje. Týden nato vyšla opravná verze 1.105.1, která se týká jen chybových hlášek u @extend.

Přání staré třináct let

Žádost o dynamické načítání souborů je v Sassu jedna z nejstarších. Issue 739 s názvem „Dynamic Dependencies“ vzniklo 8. května 2013 a do uzavření nasbíralo 123 komentářů. Zavřelo se 18. září 2026, kdy správci jazyka návrh meta.load přijali a zapsali do specifikace.

Lidé nejčastěji chtěli, aby šlo do pravidla @use (dřív @import) vložit proměnnou, třeba @use "themes/#{$theme}". To jazyk nedovolí a nedovolí ani teď. Modulový systém Sassu stojí na tom, že se závislosti dají vyčíst ze zdrojového souboru bez spuštění, tedy staticky. Na tom závisí nástroje, které hlídají změny souborů, i editory s napovídáním.

Částečnou náhradu dostal Sass už ve verzi 1.23.0 v podobě mixinu meta.load-css(). Ten načte soubor podle libovolného výrazu a vloží jeho CSS. Návrh ale připomíná, v čem je háček: modul se přeloží do CSS a pak se zahodí. Proměnné, funkce a mixiny, které v něm byly, zůstanou volajícímu nedostupné.

Co přesně přibylo

Funkce meta.load($url, $with: null) bere tytéž parametry jako meta.load-css(). Místo vložení CSS ale vrátí načtený modul. Samotné načtení podle dokumentace modulu sass:meta žádné CSS nevypíše. To se do výstupu dostane až novým mixinem meta.css(), a to v místě jeho volání, ne v místě načtení. Původní meta.load-css() je teď popsaný jako zkratka za meta.css(meta.load(…)).

Druhá nová funkce, meta.get-module(), vrátí modul, který soubor už načetl pravidlem @use; stačí jí jmenný prostor. Modul přitom nepřekládá znovu.

S modulem jako hodnotou pracuje osm starších funkcí z sass:meta, mimo jiné meta.module-variables(), meta.get-function() a meta.get-mixin(). Do jejich parametru $module šlo dosud dát jen jméno jmenného prostoru, tedy řetězec. Teď vezmou i modul.

Jiné operace než not a porovnání == modul nepodporuje. Dva moduly se podle specifikace rovnají, když jde o tentýž načtený soubor, protože Sass každý soubor přeloží jen jednou a podruhé vrátí už hotový modul. Do výsledného CSS se modul vypsat nedá; ladicí výpis ukáže get-module("jméno") místo celé cesty, aby z něj nebylo vidět, jak má autor uspořádaný disk.

Vyzkoušeli jsme to

Na verzi 1.105.1 z npm jsme přeložili krátký soubor, který jméno tématu skládá z proměnné:

@use "sass:meta";
@use "themes/dark";

$name: "light";
$a: meta.load("themes/#{$name}");
@debug meta.module-variables($a);
@debug meta.get-module("dark") == meta.load("themes/dark");

.wrap { @include meta.css($a); }

Překladač vypsal proměnné světlého tématu, ("bg": #fff), a porovnání modulu z @use s týmž souborem načteným funkcí vrátilo true. CSS světlého tématu skončilo uvnitř selektoru .wrap, tmavé téma z @use zůstalo na nejvyšší úrovni. Ve druhé zkoušce jsme modul načetli s parametrem $with, přes meta.get-function() z něj vytáhli funkci a zavolali ji pomocí meta.call(); i to prošlo. Tentýž soubor ve verzi 1.104.1 skončil chybou „Undefined function“.

Na co si dát pozor

Specifikace upozorňuje, že mixin meta.css() vypíše CSS modulu i se všemi závislostmi. Když má načtený modul společné závislosti se souborem, který ho volá, jejich CSS se ve výstupu objeví dvakrát. Dokumentace k tomu dodává, že se modul přeloží jen jednou, při prvním načtení. Rodičovské selektory & v něm proto nevidí nic z místa, kde se později vloží, ani když stojí meta.css() uvnitř jiného selektoru.

Nový typ dostalo i rozhraní pro JavaScript: třídu SassModule a metodu Value.assertModule(). Vlastní funkce napsaná v JavaScriptu tak modul dostane a může ho vrátit, ale nic z něj nepřečte. Návrh to vysvětluje tím, že by se jinak musel výrazně rozšířit protokol, kterým s překladačem mluví okolní nástroje, a sestrojit modul v JavaScriptu nejde vůbec. Obojí nechávají autoři na pozdější návrhy.

Funkce je jen v Dart Sassu. Dokumentace u ní uvádí, že LibSass ani Ruby Sass ji nemají; oba starší překladače se už nevyvíjejí.

Zdroje

• Dart Sass 1.105.0, poznámky k vydání
• Seznam změn Dart Sassu (1.105.0 a 1.105.1)
• Přijatý návrh meta.load()
• Issue 739: Dynamic Dependencies
• Dokumentace modulu sass:meta
• Balíček sass v registru npm