Stilsett utvikling med Sass, selv når du bruker sitt mest grunnleggende funksjonene, som hekker på egenskaper eller variabler, sparer verdifull tid og gjør livet enklere for front-end utviklere. Det er ikke overraskende at CSS pre-prosessorer har vært mye vedtatt som de facto måten å lage maler for webområder og programmer; vi rett og slett ikke kan leve uten dem lenger.,
Når det gjelder å tematisere, det er, endre utseendet og følelsen av ditt nettsted og samtidig opprettholde sin layout, Sass’ funksjoner—som mixins eller funksjoner—kan føles som å ta et fly i stedet for å vandre! I denne SCSS opplæringen, vi kommer til å opprette en minimal tema og bruke SCSS å gi våre CSS programmering noen superkrefter.
En Grunnleggende Mixin Tilnærming
La oss si at vi har følgende oppsett:
Vi har blitt bedt om å opprette flere temaer for det., Temaet har for å endre farger for alle beholdere (herunder de viktigste container) og knappen, og tema vil være bestemt av en klasse i kroppen, eller det kan være en «ytre» container samt:
<body class="theme-1">La oss bygge en mixin heter «themable», som vil inneholde vårt fargevalg som parametre.,
Deretter bruke den til å generere våre temaer:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49);@include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);På dette punktet, vi har allerede spart mye tid, men det er noen problemer med denne metoden:
Temaer normalt har massevis av forskjellige egenskaper ved siden av farger. For eksempel, hvis vi ønsket å endre Bootstrap tema, skriver en mixin etter forrige «oppskrift» ville være vanskelig å opprettholde, og koden er vanskelig å lese. Pluss, vi er egentlig ikke følgende Sass beste praksis—for eksempel ved å skrive inn hex-fargekoder direkte inn i mixin.,
en Design Stiler Ordningen med Sass Kart
ved hjelp av kart, som i hovedsak som nøkkel indeksert matriser, kan vi bygge en mer semantisk, meningsfylt sett av stiler for vårt tema, som vil være enklere å vedlikeholde og forstå med vår kollega utviklere. Vi kan bruke lister som godt, men personlig finner jeg maps mer egnet for dette formålet. Lister ikke har taster mens du taster er selv-explainable.,
kartet for våre nye tilnærmingen vil være en nestet kart:
Hvis vi ønsket å få tilgang til hver del av vår ordning theme-1 og dens sub-kart, vi bruker @each direktiv til å gå gjennom hver av dem:
@each $section, $map in $theme-1$section vil returnere nøkkelen til den aktuelle seksjonen, og $map vil returnere den nestede kart som svarer til denne nøkkelen.,
Så, vi kan få tilgang til egenskapene for hvert kart, la oss si at bakgrunnen (bg) eiendom, bruk av map-get funksjoner:
map-get($map, bg)til Slutt, ved å kombinere vår nye mixin, basert på våre kart struktur, vi kan lage så mange temaer som vi liker:
Merk at vi også bruke @if direktiv for å differensiere egenskaper for deler som er ikke-knappene.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }Denne måten, kan vi legge til ulike egenskaper for noen deler for å skape bestemte egenskaper eller regler, eller vi kan skille mellom en tast med et enkelt verdi fra en annen med en nestet kartet.
Vårt tema kan også bestå av mange kart som brukes av flere mixins, brukes i ulike deler av stilark. Det hele avhenger av kompleksiteten av vår base layout og, selvfølgelig, vår personlige tilnærming.,
Ytterligere Optimalisering
Sass tilbyr nyttige innebygd funksjoner for å redde oss selv mer arbeid, for eksempel hsl funksjoner som lighten eller darken for å beregne, for eksempel fargen på a-knappen når du holder markøren over den.
Vi kan endre koden for knappen for å lette sin bakgrunn når musepekeren er over, uavhengig av den opprinnelige bakgrunnsfarge. Denne måten, trenger vi ikke å legge til en annen farge for denne tilstanden.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width);} @else { &:hover { background-color: lighten(map-get($map, bg), 20%); }}Også, med bruk av Sass moduler, vår koden kan være enda mer forståelig og skalerbare, og hvert tema kart kan være inneholdt i en modul og deretter importert til våre viktigste stilark.
@import 'theme-1';@import 'theme-2';@import 'theme-3';… … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container {… … Dette ville kreve at modulene skal kunne plasseres i prosjektet, som er:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Hvis du er interessert i å lære mer om bruk av Sass å TØRKE CSS, stipendiat Toptaler Justin Brazeau og Sass entusiast omhandler nettopp dette i sin glimrende artikkel Sass Mixins: Holde Stilark TØRR.