Stylesheet rozvoj s Sass, a to i při použití jeho nejzákladnější funkce, jako je hnízdění vlastnosti nebo proměnné, šetří drahocenný čas a usnadní život pro front-end vývojáře. Není divu, že CSS pre-procesory byly široce přijaty jako de facto způsob vytváření stylů pro webové stránky a aplikace; prostě nemůžeme žít bez nich už.,
pokud jde o theming; to znamená, že změna vzhledu a pocitu vašeho webu při zachování jeho rozvržení, funkce Sass-jako mixiny nebo funkce-se mohou cítit jako vzít letadlo místo chůze! V tomto tutoriálu SCSS vytvoříme minimální téma a použijeme SCSS, abychom našim programům CSS poskytli nějaké supervelmoci.
Základní Mixin Přístup
řekněme, že máme následující uspořádání:
byli Jsme požádáni, aby vytvořit více témat., Téma musí změnit barvy pro všechny kontejnery (včetně hlavní nádoby) a tlačítko, a téma bude určena třída v těle, nebo to může být „vnější“ obal:
<body class="theme-1">Pojďme postavit mixin s názvem „themable“, která bude obsahovat naše barevné schéma jako parametry.,
Pak používat to, aby generovat naše témata:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49);@include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);V tomto bodě, už jsme ušetřit spoustu času, ale tam jsou některé problémy s tímto přístupem:
Témata obvykle mají mnoho různých vlastností, vedle barvy. Například, pokud bychom chtěli upravit téma Bootstrap, psaní mixinu podle předchozího „receptu“ by bylo těžké udržet a kód těžko čitelný. Navíc ve skutečnosti nesledujeme osvědčené postupy Sass-například zadávání kódů hex barev přímo do mixinu.,
Navrhněte schéma stylů s mapami Sass
pomocí map, které jsou hlavně jako klíčová indexovaná pole, můžeme pro naše téma vytvořit sémantičtější a smysluplnější sadu stylů, které naši vývojáři snáze udržují a chápou. Mohli bychom také použít seznamy, ale osobně považuji mapy za vhodnější pro tento účel. Seznamy nemají klíče, zatímco klíče jsou self-vysvětlitelné.,
mapy pro náš nový přístup bude vnořená mapa:
Pokud jsme chtěli přístup do každé části našeho systému theme-1 a jeho sub-mapy, budeme používat @each směrnice do smyčky prostřednictvím každé z nich:
@each $section, $map in $theme-1$section vrátí klíč v aktuální sekci, a $map vrátí vnořené mapy, která odpovídá klíči.,
Pak můžeme získat přístup k vlastnosti každé mapě, řekněme pozadí (bg) vlastnosti, pomocí map-get funkce:
map-get($map, bg)Konečně, kombinující náš nový mixin, založené na naší mapě strukturu, můžeme vytvořit jako mnoho témat, jak se nám líbí:
Všimněte si, že jsme také pomocí @if směrnice k rozlišení vlastností na úseky, které nejsou tlačítka.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }Tímto způsobem můžeme přidat různé vlastnosti pro některé části vytvořit specifické vlastnosti, nebo dokonce pravidla, nebo můžeme rozlišovat mezi klíč s jedinou hodnotu, která se od sebe vnořené mapy.
naše téma by se také mohlo skládat z mnoha map používaných několika mixiny, aplikovaných v různých částech našeho stylesheetu. Vše závisí na složitosti našeho základního uspořádání a samozřejmě na našem osobním přístupu.,
Další Optimalizace
Sass nabízí užitečné vestavěné funkce, aby nás zachránil i více práce, například, hsl funkce, jako je lighten nebo darken pro výpočet, například, barva, tlačítko, když vznášející se nad to.
můžeme upravit kód tlačítka, abychom zesvětlili jeho pozadí při vznášení, bez ohledu na původní barvu pozadí. Tímto způsobem nemusíme přidávat další barvu pro tento stav.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width);} @else { &:hover { background-color: lighten(map-get($map, bg), 20%); }}Také, s použitím Sass moduly, náš kód může být i více čitelná a škálovatelné; každé téma mapy mohou být obsaženy v modulu, a pak importovat do našich hlavních stylů.
@import 'theme-1';@import 'theme-2';@import 'theme-3';… … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container {… … To by vyžadovalo moduly, které mají být uvedeny v projektu jako:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Pokud máte zájem dozvědět se více o použití Sass na SUCHÉ CSS, kolegy Toptaler Justin Brazeau a Sass nadšenec popisuje jen to v jeho brilantní článek Sass Mixins: aby se Vaše Styly SUCHÉ.