Motywowanie z Sass: samouczek SCSS
Opublikowany: 2022-03-11Tworzenie arkuszy stylów za pomocą Sass, nawet przy użyciu jego najbardziej podstawowych funkcji, takich jak właściwości zagnieżdżania lub zmienne, oszczędza cenny czas i ułatwia życie programistom front-end. Nic dziwnego, że preprocesory CSS zostały powszechnie przyjęte jako de facto sposób tworzenia stylów dla stron internetowych i aplikacji; po prostu nie możemy już bez nich żyć.
Jeśli chodzi o motywy ; czyli zmiana wyglądu i stylu witryny przy jednoczesnym zachowaniu jej układu, funkcje Sassa — takie jak domieszki lub funkcje — mogą przypominać lecenie samolotem zamiast chodzenia! W tym samouczku SCSS stworzymy minimalistyczny motyw i użyjemy SCSS, aby nadać naszemu programowaniu CSS supermoce.
Podstawowe podejście mixin
Załóżmy, że mamy następujący układ:
<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> Poproszono nas o stworzenie do tego wielu motywów. Motyw musi zmienić kolory dla wszystkich kontenerów (w tym kontenera głównego) i przycisku, a motyw będzie określony przez klasę w treści lub może to być również kontener „zewnętrzny”:
<body class="theme-1">Zbudujmy mixin o nazwie „themable”, który będzie zawierał nasz schemat kolorów jako parametry.
@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; } } } }Następnie użyj go do wygenerowania naszych motywów:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); W tym momencie zaoszczędziliśmy już dużo czasu, ale są pewne problemy z takim podejściem:
Motywy zwykle mają wiele różnych właściwości oprócz kolorów. Na przykład, gdybyśmy chcieli zmodyfikować motyw Bootstrap, napisanie mixina zgodnie z poprzednim „przepisem” byłoby trudne w utrzymaniu, a kod trudny do odczytania. Poza tym tak naprawdę nie stosujemy się do najlepszych praktyk Sassa — na przykład wprowadzania kodów kolorów szesnastkowych bezpośrednio do mixina.
Zaprojektuj schemat stylów za pomocą map Sass
Z pomocą map, które są głównie jak tablice indeksowane kluczami, możemy zbudować bardziej semantyczny, znaczący zestaw stylów dla naszego motywu, który będzie łatwiejszy do utrzymania i zrozumienia przez naszych kolegów programistów. Moglibyśmy również skorzystać z list , ale osobiście uważam mapy za bardziej odpowiednie do tego celu. Listy nie zawierają kluczy, podczas gdy klucze nie wymagają wyjaśnienia.
Mapa dla naszego nowego podejścia będzie mapą zagnieżdżoną :
$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 ) ); Jeśli chcielibyśmy uzyskać dostęp do każdej sekcji naszego schematu theme-1 i jego pod-map, użyjemy dyrektywy @each , aby przejść przez każdą z nich:
@each $section, $map in $theme-1 $section zwróci klucz bieżącej sekcji, a $map zwróci zagnieżdżoną mapę, która odpowiada temu kluczowi.
Następnie możemy uzyskać dostęp do właściwości każdej mapy, powiedzmy właściwości background (bg), za pomocą funkcji map-get :
map-get($map, bg)Wreszcie, łącząc nasz nowy mixin, oparty na naszej strukturze mapy, możemy stworzyć tyle motywów, ile chcemy:
@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); … … Zauważ, że używamy również dyrektywy @if do rozróżniania właściwości sekcji, które nie są przyciskami.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }W ten sposób możemy dodać różne właściwości dla niektórych sekcji, aby utworzyć określone właściwości lub nawet reguły, lub możemy odróżnić klucz z pojedynczą wartością od innego z zagnieżdżoną mapą.
Nasz motyw może również składać się z wielu map używanych przez kilka domieszek, zastosowanych w różnych częściach naszego arkusza stylów. Wszystko zależy od złożoności naszego układu bazowego i oczywiście od naszego osobistego podejścia.
Dalsza optymalizacja
Sass oferuje przydatne wbudowane funkcje, aby zaoszczędzić nam jeszcze więcej pracy; na przykład hsl działa jak lighten lub darken , aby na przykład obliczyć kolor przycisku po najechaniu na niego.
Możemy zmodyfikować kod przycisku, aby rozjaśnić jego tło po najechaniu kursorem, niezależnie od oryginalnego koloru tła. W ten sposób nie musimy dodawać kolejnego koloru dla tego stanu.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }Ponadto dzięki wykorzystaniu modułów Sass nasz kod może być jeszcze bardziej czytelny i skalowalny; każda mapa tematyczna może być zawarta w module, a następnie zaimportowana do naszego głównego arkusza stylów.
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …Wymagałoby to umieszczenia modułów w projekcie jako:
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
Jeśli chcesz dowiedzieć się więcej o używaniu Sassa do SUSZENIA swojego CSS, kolega Toptaler Justin Brazeau i entuzjasta Sassa omawia to w swoim genialnym artykule Sass Mixins: Keep Your Stylesheets DRY .