tworzenie arkuszy stylów z 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 pre-procesory CSS zostały szeroko 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 tematykę, czyli zmianę wyglądu i wyglądu witryny przy zachowaniu jej układu, funkcje Sass—takie jak mixiny lub funkcje-mogą mieć wrażenie, że lecą samolotem zamiast chodzić! W tym samouczku SCSS stworzymy minimalny motyw i użyjemy SCSS, aby dać naszemu programowaniu CSS jakieś supermoce.
a Basic Mixin Approach
Załóżmy, że mamy następujący układ:
zostaliśmy poproszeni o utworzenie dla niego wielu motywów., Motyw musi zmieniać kolory dla wszystkich kontenerów (w tym głównego kontenera) i przycisku, a motyw będzie określony przez klasę w ciele, lub może to być również” zewnętrzny ” kontener:
<body class="theme-1">zbudujmy mixin o nazwie „themable”, który będzie zawierał nasz schemat kolorów jako parametry.,
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ż wiele czasu, ale są pewne problemy z tym podejściem:
motywy zwykle mają wiele różnych właściwości obok kolorów. Na przykład, gdybyśmy chcieli zmodyfikować motyw Bootstrap, pisanie mixin zgodnie z poprzednim „przepisem” byłoby trudne do utrzymania, a kod trudny do odczytania. Poza tym nie stosujemy najlepszych praktyk Sass—na przykład Wprowadzamy kody kolorów hex bezpośrednio do Mixin.,
Zaprojektuj schemat stylów z mapami Sass
za pomocą map, które są głównie jak kluczowe tablice indeksowane, 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 też użyć list, ale osobiście uważam, że mapy są bardziej odpowiednie do tego celu. Listy nie mają kluczy, podczas gdy klucze są samodzielne.,
Mapa dla naszego nowego podejścia będzie zagnieżdżoną mapą:
jeśli chcemy uzyskać dostęp do każdej sekcji naszego schematu theme-1 I JEGO pod-map, używamy dyrektywy @each do pętli 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ę odpowiadającą temu kluczowi.,
następnie możemy uzyskać dostęp do właściwości każdej mapy, powiedzmy właściwości tła (BG), używając funkcjimap-get:
map-get($map, bg)wreszcie, łącząc nasz nowy mixin, w oparciu o naszą strukturę mapy, możemy tworzyć tyle motywów, ile chcemy:
zauważ, że używamy również@if dyrektywa rozróżniająca 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 mixinów, stosowanych w różnych częściach naszego arkusza stylów. Wszystko zależy od złożoności naszego układu bazowego i, oczywiście, naszego osobistego podejścia.,
dalsza optymalizacja
Sass oferuje przydatne wbudowane funkcje, które oszczędzają nam jeszcze więcej pracy; na przykład funkcje hsl, takie jaklighten lubdarken, aby obliczyć na przykład kolor przycisku po najechaniu kursorem 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%); }}dzięki modułom Sass nasz kod może być jeszcze bardziej czytelny i skalowalny; każda mapa motywów 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 Sass do wysuszania CSS, koledzy Toptaler Justin Brazeau i entuzjasta Sass omawiają to w swoim genialnym artykule Sass Mixins: Keep Your CSS arkusze stylów suche.