Tematică cu Sass: un tutorial SCSS
Publicat: 2022-03-11Dezvoltarea foilor de stil cu Sass, chiar și atunci când se utilizează caracteristicile sale cele mai de bază, cum ar fi proprietățile de imbricare sau variabile, economisește timp prețios și ușurează viața dezvoltatorilor front-end. Nu este surprinzător faptul că pre-procesoarele 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 tematică ; adică schimbând aspectul și senzația site-ului dvs., păstrând în același timp aspectul, funcțiile lui Sass, cum ar fi mixuri sau funcții, pot simți că luați un avion în loc să mergeți pe jos! În acest tutorial SCSS, vom crea o temă minimă și vom folosi SCSS pentru a oferi programării noastre CSS niște superputeri.
O abordare de bază Mixin
Să presupunem că avem următorul aspect:
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> Ni s-a cerut să creăm mai multe teme pentru el. Tema trebuie să schimbe culorile pentru toate containerele (inclusiv containerul principal) și butonul, iar tema va fi determinată de o clasă din corp, sau ar putea fi și un container „exterior”:
<body class="theme-1">Să construim un mixin numit „tematic” care va conține schema noastră de culori ca parametri.
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }Apoi folosiți-l 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 moment, am economisit deja mult timp, dar există câteva probleme cu această abordare:
Temele au în mod normal o mulțime de proprietăți diferite pe lângă culori. De exemplu, dacă am dori să modificăm tema Bootstrap, scrierea unui mixin după „rețeta” anterioară ar fi greu de întreținut, iar codul greu de citit. În plus, nu respectăm cele mai bune practici Sass, de exemplu, introducerea codurilor de culoare hexadecimale direct în mixin.
Proiectați o schemă de stiluri cu Sass Maps
Cu ajutorul hărților, care sunt în principal ca matrice indexate cheie, putem construi un set de stiluri mai semantic și semnificativ 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 în acest scop. Listele nu au chei, în timp ce cheile sunt autoexplicabile.
Harta pentru noua noastră abordare va fi o hartă imbricată :
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); Dacă dorim să accesăm fiecare secțiune a theme-1 a schemei noastre și sub-hărțile sale, folosim directiva @each pentru a parcurge fiecare dintre ele:
@each $section, $map in $theme-1 $section va returna cheia secțiunii curente, iar $map va returna harta imbricată care corespunde acelei chei.
Apoi, putem accesa proprietățile fiecărei hărți, să spunem proprietatea de fundal (bg), folosind funcția map-get :
map-get($map, bg)În cele din urmă, combinând noul nostru mixin, bazat pe structura hărții noastre, putem crea câte teme ne dorim:
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … Rețineți că folosim și directiva @if pentru a diferenția proprietățile secțiunilor care nu sunt butoane.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }În acest fel, putem adăuga diferite proprietăți 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 multe hărți utilizate de mai multe mix-uri, 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ă.
Optimizare suplimentară
Sass oferă funcții utile încorporate pentru a ne economisi și mai multă muncă; de exemplu, hsl funcționează ca lighten sau darken pentru a calcula, de exemplu, culoarea unui buton atunci când treceți cu mouse-ul peste el.
Putem modifica codul butonului pentru a-i lumina fundalul atunci când trecem cu mouse-ul, indiferent de culoarea originală a fundalului. În acest fel, nu trebuie să adăugăm 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, prin utilizarea modulelor Sass, codul nostru poate fi și mai lizibil și scalabil; fiecare hartă temă poate fi conținută într-un modul și apoi importată în foaia noastră 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 ca modulele să fie plasate în proiect ca:
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
Dacă sunteți interesat să aflați mai multe despre utilizarea Sass pentru a USCA CSS-ul dvs., colegul Toptaler Justin Brazeau și pasionat de Sass discută tocmai acest lucru în articolul său genial Sass Mixins: Keep Your Stylesheets DRY .