dezvoltarea foilor de stil cu Sass, chiar și atunci când se utilizează caracteristicile sale cele mai de bază, cum ar fi proprietățile de cuibărit sau variabile, economisește timp prețios și face viața mai ușoară pentru dezvoltatorii front-end. Nu este surprinzător faptul că PREPROCESOARELE CSS au fost adoptate pe scară largă ca modalitate de facto de a crea stiluri pentru site-uri web și aplicații; pur și simplu nu mai putem trăi fără ele.,
când vine vorba de theming; adică schimbarea aspectului site—ului dvs. web, menținând în același timp aspectul acestuia, caracteristicile Sass—cum ar fi mixinele sau funcțiile-pot simți ca și cum ați lua un avion în loc să mergeți! În acest tutorial SCSS, vom crea o temă minimă și vom folosi SCSS pentru a oferi programării noastre CSS câteva superputeri.
O Bază Mixin Abordare
Să presupunem că avem următoarea structură:
Am fost întrebat de a crea mai multe teme pentru ea., Tema a de a schimba culorile pentru toate containere (inclusiv recipientul principal) și butonul, iar tema va fi stabilită de către o clasă în organism, sau ar putea fi un „exterior” container precum:
<body class="theme-1">Să construim un mixin numit „themable”, care va conține schema de culori ca parametri.,
Apoi utilizați pentru a genera temele noastre:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49);@include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);În acest punct, deja am salvat o mulțime de timp, dar există unele probleme cu această abordare:
Teme în mod normal, au o mulțime de proprietăți diferite, alături de culori. De exemplu, daca am vrea sa modificam tema Bootstrap, scrierea unui mixin dupa „reteta” anterioara ar fi greu de intretinut si codul greu de citit. În plus, nu urmărim cu adevărat cele mai bune practici Sass—de exemplu, introducerea codurilor de culoare hex direct în mixin.,cu ajutorul hărților, care sunt în principal ca matrice indexate cheie, putem construi un set mai semantic, semnificativ de stiluri pentru tema noastră, care va fi mai ușor de întreținut și de înțeles de către colegii noștri Dezvoltatori. Am putea folosi și liste, dar, personal, găsesc hărți mai potrivite pentru acest scop. Listele nu au chei în timp ce cheile sunt auto-explicabile.,
hartă pentru noua noastră abordare va fi imbricate harta:
Dacă ne-am dorit pentru a accesa fiecare secțiune a programului nostru theme-1 și sub-hărți, vom folosi @each directiva a bucla prin fiecare dintre ele:
@each $section, $map in $theme-1$section va reveni cheia din secțiunea curentă, și $map va reveni imbricate hartă care corespunde cu cheia.,
Apoi, putem accesa proprietățile de fiecare harta, sa zicem fundal (bg) proprietatea, folosind map-get funcția:
map-get($map, bg)în cele din Urmă, combinând noul nostru mixin, pe baza harta noastră structură, putem crea cât mai multe teme, cum ne place:
Rețineți că suntem, de asemenea, folosind @if directiva a diferenția proprietățile pentru secțiunile care nu sunt butoane.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }În acest fel, putem adăuga proprietăți diferite pentru unele secțiuni pentru a crea proprietăți specifice sau chiar reguli sau putem distinge între o cheie cu o singură valoare de alta cu o hartă imbricată.
tema noastră ar putea consta, de asemenea, din mai multe hărți utilizate de mai multe mixine, aplicate în diferite părți ale foii noastre de stil. Totul depinde de complexitatea aspectului nostru de bază și, desigur, de abordarea noastră personală.,Sass oferă funcții utile încorporate pentru a ne salva și mai multă muncă; de exemplu, funcțiile hsl precum lighten sau darken pentru a calcula, de exemplu, culoarea unui buton atunci când treceți peste el.putem modifica codul butonului pentru a-i lumina fundalul atunci când se deplasează, indiferent de culoarea de fundal originală. În acest fel, nu trebuie să adăugăm o altă culoare pentru această stare.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width);} @else { &:hover { background-color: lighten(map-get($map, bg), 20%); }}De asemenea, cu utilizarea modulelor Sass, codul nostru poate fi și mai lizibil și scalabil; fiecare hartă tematică poate fi conținută într-un modul și apoi importată în foaia de stil principală.
@import 'theme-1';@import 'theme-2';@import 'theme-3';… … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container {… … Acest lucru ar necesita module pentru a fi introduse în proiect ca:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Dacă sunteți interesat în procesul de învățare mai multe despre utilizarea Sass să se USUCE CSS, colegii Toptaler Justin Brazeau și Sass pasionat discută doar în articol genial Sass Mixins: Păstrați USCAT foi de Stil.