Stylesheet udvikling med Sass, selv når du bruger de mest almindelige funktioner, som nesting egenskaber eller variabler, sparer værdifuld tid og gør livet lettere for front-end udviklere. Det er ikke overraskende, at CSS pre-processorer er blevet bredt vedtaget som de facto måde at skabe stilarter til hjemmesider og applikationer; Vi kan simpelthen ikke leve uden dem længere.,
Når det kommer til temaer, det er, at ændre udseendet og funktionaliteten af din hjemmeside, og samtidig bevare sin layout, Sass’ funktioner—som mixins eller funktioner—og det kan føles som at tage et fly i stedet for at gå! I denne SCSS-tutorial vil vi skabe et minimalt tema og bruge SCSS til at give vores CSS-programmering nogle supermagter.
En Grundlæggende Mixin Tilgang
Lad os sige vi har følgende layout:
Vi er blevet bedt om at oprette flere temaer for det., Temaet har til at ændre farver for alle containere (herunder de vigtigste container) og knappen, og temaet vil være bestemt af en klasse i kroppen, eller det kunne være en “ydre” container samt:
<body class="theme-1">Lad os bygge en mixin navnet “themable”, som vil indeholde vores farveskema som parametre.,
Derefter bruge den til at generere vores temaer:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49);@include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);På dette tidspunkt, vi har allerede sparet en masse tid, men der er nogle problemer med denne tilgang:
Temaer, der normalt har masser af forskellige egenskaber ved siden af farver. For eksempel, hvis vi ønskede at ændre Bootstrap-temaet, ville det være svært at vedligeholde og koden svært at læse at skrive en mi .in efter den forrige “opskrift”. Plus, vi følger ikke rigtig Sass bedste praksis—for eksempel at indtaste he.farvekoder direkte i Mi .in.,
Design et Styles-skema med Sass-kort
Ved hjælp af kort, der hovedsageligt er som nøgleindekserede arrays, kan vi opbygge et mere semantisk, meningsfuldt sæt stilarter til vores tema, som vil være lettere at vedligeholde og forstå af vores kollegaudviklere. Vi kunne også bruge lister, men personligt finder jeg kort mere egnede til dette formål. Lister har ikke nøgler, mens nøgler er selvforklarelige.,
kort for vores nye tilgang vil være en indlejret kort:
Hvis vi ønskede at få adgang til hvert afsnit af vores ordning theme-1 og dens sub-kort, bruger vi @each direktiv til at sløjfe gennem hver af dem:
@each $section, $map in $theme-1$section vil returnere nøglen for det aktuelle afsnit og $map vil vende tilbage i det indlejrede kort, der svarer til, at nøglen.,
Så, vi kan få adgang til egenskaber for hvert kort, lad os sige, at baggrunden (bg) ejendom, ved brug af map-get funktion:
map-get($map, bg)Endelig, at kombinere vores nye mixin, baseret på vores kort struktur, vi kan oprette så mange temaer, som vi gerne:
Bemærk, at vi også bruger @if direktiv til at differentiere egenskaberne for sektioner, der er ikke knapper.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }på Denne måde, kan vi tilføje forskellige egenskaber for nogle afsnit for at oprette særlige egenskaber eller endda regler, eller vi kan skelne mellem en nøgle med en enkelt værdi fra en anden med en indlejret kort.
vores tema kan også bestå af mange kort, der bruges af flere mi .ins, anvendt i forskellige dele af vores stylesheet. Det hele afhænger af kompleksiteten af vores basislayout og selvfølgelig vores personlige tilgang.,
Yderligere Optimering
Sass tilbyder nyttige indbyggede funktioner til at redde os endnu mere arbejde; for eksempel, hsl funktioner som lighten eller darken for at beregne, for eksempel, farven på en knap, når markøren er over det.
Vi kan ændre knapkoden for at lette baggrunden, når du svæver, uanset den originale baggrundsfarve. På denne måde behøver vi ikke tilføje en anden farve til denne tilstand.,
@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 brug af Sass-moduler kan vores kode være endnu mere læselig og skalerbar; hvert temakort kan indeholdes i et modul og derefter importeres til vores vigtigste stilark.
@import 'theme-1';@import 'theme-2';@import 'theme-3';… … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container {… … Dette ville kræve, at de moduler, der skal placeres i projektet som:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Hvis du er interesseret i at lære mere om brug af Sass til at TØRRE dit CSS, kolleger Toptaler Justin Brazeau og Sass entusiast diskuterer netop dette i hans strålende artikel Sass Mixins: Hold Dine Stylesheets TØR.