Stylesheet-ontwikkeling met Sass, zelfs bij het gebruik van de meest basisfuncties, zoals nesting-Eigenschappen of variabelen, bespaart kostbare tijd en maakt het leven makkelijker voor front-end ontwikkelaars. Het is niet verwonderlijk dat CSS pre-processors op grote schaal zijn aangenomen als de de facto manier van het creëren van stijlen voor websites en applicaties; we kunnen gewoon niet meer leven zonder hen.,
als het gaat om het thema; dat wil zeggen, het veranderen van de look en feel van uw website met behoud van de lay—out, Sass’ functies—zoals mixins of functies-kan voelen als het nemen van een vliegtuig in plaats van lopen! In deze SCSS tutorial gaan we een minimaal thema maken en SCSS gebruiken om onze CSS programmering wat superkrachten te geven.
een Basismixin benadering
stel dat we de volgende opmaak hebben:
Er is gevraagd om meerdere thema ‘ s voor te maken., Het thema moet van kleur veranderen voor alle containers (inclusief de hoofdcontainer) en de knop, en het thema zal worden bepaald door een klasse in de body, of het kan ook een “outer” container zijn:
<body class="theme-1">laten we een mixin bouwen met de naam “themable” die ons kleurenschema als parameters zal bevatten.,
gebruik het dan om onze thema ‘ s te genereren:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49);@include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);Op dit moment hebben we al veel tijd bespaard, maar er zijn enkele problemen met deze aanpak:
thema ‘ s hebben normaal gesproken veel verschillende eigenschappen naast kleuren. Bijvoorbeeld, als we het Bootstrap-thema wilden wijzigen, zou het schrijven van een mixin volgens het vorige “recept” moeilijk te onderhouden zijn en de code moeilijk te lezen. Plus, we zijn niet echt volgen Sass best practices – bijvoorbeeld, het invoeren van hex kleurcodes direct in de mixin.,
ontwerp Een stijlen schema met Sass Maps
met behulp van maps, die voornamelijk als belangrijke geïndexeerde arrays zijn, kunnen we een meer semantische, betekenisvolle set stijlen voor ons thema bouwen, die gemakkelijker te onderhouden en te begrijpen zal zijn door onze collega-ontwikkelaars. We zouden ook lijsten kunnen gebruiken, maar persoonlijk vind ik Kaarten geschikter voor dit doel. Lijsten hebben geen sleutels terwijl sleutels zelfuitlegbaar zijn.,
De kaart voor onze nieuwe aanpak wordt een geneste map:
Als we wilden om toegang te krijgen tot elk gedeelte van onze regeling theme-1 en de sub-kaarten, gebruiken we de @each richtlijn voor het doorlopen van elk van hen:
@each $section, $map in $theme-1$section zal de terugkeer van de toets van de huidige sectie en de $map zal de terugkeer van de geneste kaart die overeenkomt met die sleutel.,
dan kunnen we toegang krijgen tot de eigenschappen van elke kaart, laten we zeggen de eigenschap background (bg), met behulp van de map-get functie:
map-get($map, bg)tenslotte, door onze nieuwe mixin te combineren, op basis van onze kaartstructuur, kunnen we zoveel thema ‘ s maken als we willen:
merk op dat we ook de richtlijn om eigenschappen te onderscheiden voor secties die geen knoppen zijn.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }op deze manier kunnen we verschillende eigenschappen toevoegen voor sommige secties om specifieke eigenschappen of zelfs regels te maken, of we kunnen onderscheid maken tussen een sleutel met een enkele waarde van een andere met een geneste kaart.
ons thema kan ook bestaan uit vele kaarten die door verschillende mixins worden gebruikt, toegepast in verschillende delen van ons stylesheet. Het hangt allemaal af van de complexiteit van onze basis lay-out en, natuurlijk, onze persoonlijke aanpak.,
verdere optimalisatie
Sass biedt nuttige ingebouwde functies om ons nog meer werk te besparen; bijvoorbeeld, de hsl-functies zoalslighten ofdarken om bijvoorbeeld de kleur van een knop te berekenen wanneer er overheen wordt geschoven.
We kunnen de knopcode wijzigen om de achtergrond ervan lichter te maken wanneer er met de muis wordt gezwenkt, ongeacht de oorspronkelijke achtergrondkleur. Op deze manier hoeven we geen andere kleur toe te voegen voor deze toestand.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width);} @else { &:hover { background-color: lighten(map-get($map, bg), 20%); }}ook, met het gebruik van Sass modules, onze code kan nog leesbaarder en schaalbaar; elke thema kaart kan worden opgenomen in een module en vervolgens geïmporteerd in onze belangrijkste stylesheet.
@import 'theme-1';@import 'theme-2';@import 'theme-3';… … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container {… … Dit vereist dat de modules in het project worden geplaatst als:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Als u meer wilt weten over het gebruik van Sass om uw CSS te drogen, bespreken collega Toptaler Justin Brazeau en Sass enthousiaste dit in zijn briljante artikel Sass Mixins: Houd uw Stylesheets droog.