Stylesheet utveckling med Sass, även när du använder dess mest grundläggande funktioner, som häckande egenskaper eller variabler, sparar värdefull tid och gör livet enklare för front-end-utvecklare. Det är inte förvånande att css pre-processorer har antagits allmänt som de facto sätt att skapa stilar för webbplatser och applikationer; vi kan helt enkelt inte leva utan dem längre.,
När det gäller teman; det vill säga att ändra utseendet på din webbplats samtidigt som dess layout, Sass ’ funktioner – som mixins eller funktioner—kan kännas som att ta ett plan i stället för att gå! I denna SCSS handledning kommer vi att skapa ett minimalt tema och använda SCSS för att ge våra CSS-programmering några supermakter.
A Basic Mixin Approach
låt oss säga att vi har följande layout:
Vi har blivit ombedda att skapa flera teman för det., Temat måste ändra färger för alla behållare (inklusive huvudbehållaren) och knappen, och temat kommer att bestämmas av en klass i kroppen, eller det kan vara en ”yttre” Behållare också:
<body class="theme-1">låt oss bygga en mixin som heter ”themable” som kommer att innehålla vårt färgschema som parametrar.,
använd sedan det för att generera våra teman:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49);@include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);vid denna tidpunkt har vi redan sparat mycket tid, men det finns några problem med detta tillvägagångssätt:
teman har normalt många olika egenskaper bredvid färger. Till exempel, om vi ville ändra Bootstrap tema, skriva en mixin efter föregående ”recept” skulle vara svårt att underhålla och koden svårt att läsa. Dessutom följer vi inte riktigt Sass-bästa praxis—till exempel anger hex-färgkoder direkt i mixin.,
utforma ett formatmallar med Sass-kartor
med hjälp av kartor, som huvudsakligen är som nyckelindexerade arrayer, kan vi bygga en mer semantisk, meningsfull uppsättning stilar för vårt tema, vilket blir lättare att underhålla och förstå av våra kollegas Utvecklare. Vi kan också använda listor, men personligen finner jag kartor mer lämpliga för detta ändamål. Listor har inte nycklar medan nycklar är självförklarande.,
kartan för vårt nya tillvägagångssätt kommer att vara en kapslad karta:
om vi ville komma åt varje del av vårt systemtheme-1 och dess underkartor använder vi direktivet@each för att gå igenom var och en av dem:
@each $section, $map in $theme-1$section returnerar nyckeln i den aktuella sektionen, och$map returnerar den kapslade kartan som motsvarar den nyckeln.,
då kan vi komma åt egenskaperna för varje karta, låt oss säga bakgrunden (bg) egendom, med hjälp av map-get funktion:
map-get($map, bg)slutligen, kombinera vår nya mixin, baserat på vår kartstruktur, kan vi skapa så många teman som vi vill:
Observera att vi också använder @if direktiv för att skilja egenskaper för avsnitt som inte är knappar.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }På så sätt kan vi lägga till olika egenskaper för vissa avsnitt för att skapa specifika egenskaper eller till och med regler, eller så kan vi skilja mellan en nyckel med ett enda värde från en annan med en kapslad karta.
vårt tema kan också bestå av många kartor som används av flera mixiner, applicerade i olika delar av vår stilmall. Det beror helt på komplexiteten i vår baslayout och naturligtvis vårt personliga tillvägagångssätt.,
ytterligare optimering
Sass erbjuder användbara inbyggda funktioner för att spara oss ännu mer arbete; till exempel HSL funktioner som lighteneller darken för att beräkna, till exempel, färgen på en knapp när du svävar över den.
Vi kan ändra knappkoden för att lätta bakgrunden när du svävar, oavsett den ursprungliga bakgrundsfärgen. På så sätt behöver vi inte lägga till en annan färg för detta tillstånd.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width);} @else { &:hover { background-color: lighten(map-get($map, bg), 20%); }}även med användning av Sass-moduler kan vår kod vara ännu mer läsbar och skalbar; varje temakarta kan finnas i en modul och importeras sedan till vår huvudsakliga stilmall.
@import 'theme-1';@import 'theme-2';@import 'theme-3';… … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container {… … Detta skulle kräva att modulerna ska placeras i projektet som:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Om du är intresserad av att lära dig mer om att använda Sass att TORKA din CSS, karl Toptaler Justin Brazeau och Sass entusiasten diskuterar just detta i sin lysande artikel Sass Mixins: Håll Dina Stilmallar TORR.