Obejmując Sass: dlaczego powinieneś przestać używać Vanilla CSS

Kiedy po raz pierwszy usłyszałem o Sassie i innych preprocesorach CSS, moje dokładne myśli nie były zbyt entuzjastyczne. „Dlaczego potrzebujemy innego narzędzia do czegoś, co już działa tak pięknie jak CSS?”. „Nie użyję tego”. „Mój CSS jest na tyle uporządkowany, że go nie potrzebuje”. „Preprocesor jest dla ludzi, którzy nie wiedzą, jak pisać CSS, jeśli wiesz, jak pisać CSS, nie potrzebujesz preprocesora”. „W końcu procesory są dla osób, które nie umieją pisać CSS. Gdyby tak było, nie potrzebowaliby preprocesora”. I właściwie przez jakiś czas ich unikałem, dopóki nie zostałem zmuszony do użycia go w kilku projektach.

Nie zdawałem sobie sprawy, jak bardzo podobała mi się praca z Sass do niedawna, kiedy musiałem wrócić do waniliowego CSS w projekcie. W tym czasie nauczyłem się tak wiele, że postanowiłem pochwalić Sassa i uczynić ten świat lepszym, a ciebie szczęśliwszą osobą!

Dlaczego mimo to warto korzystać z Sassa?

Organizacja: @import

Ten projekt, o którym właśnie wspomniałem, duży serwis e-commerce, miał pojedynczy plik CSS z 7184 liniami nieskompresowanych deklaracji stylu. Tak, dobrze przeczytałeś: siedem tysięcy sto osiemdziesiąt cztery wiersze CSS. Jestem pewien, że nie jest to największy front-endowy programista z plikami CSS, z jakim musieli się zmierzyć w branży, ale był na tyle duży, że był kompletnym bałaganem.

To pierwszy powód, dla którego potrzebujesz Sassa: pomaga on organizować i modularyzować arkusze stylów. To nie są zmienne, to nie jest zagnieżdżanie. Dla mnie kluczową cechą Sassa są podszablony i sposób, w jaki rozszerza regułę CSS @import, aby umożliwić importowanie plików SCSS i Sass. W praktyce oznacza to, że będziesz mógł podzielić swój ogromny plik style.css na kilka mniejszych plików, które będą łatwiejsze w utrzymaniu, zrozumieniu i uporządkowaniu.

Reguła @import istnieje prawie tak długo, jak sam CSS. Jednak zyskał złą sławę, ponieważ kiedy używasz @import w swoich plikach CSS, wyzwalasz oddzielne żądania HTTP, po jednym dla każdego importowanego pliku CSS. Może to negatywnie wpłynąć na wydajność Twojej witryny. Więc co się dzieje, gdy używasz go z Sassem? Jeśli nigdy nie zastanawiałeś się nad tym, co oznacza słowo „preprocesor”, teraz nadszedł czas.

Preprocesor to program, który przetwarza swoje dane wejściowe w celu wygenerowania danych wyjściowych, które są używane jako dane wejściowe innego programu. — Wikipedia

Wracając więc do naszej reguły @import, oznacza to, że @import będzie obsługiwany przez Sass, a wszystkie nasze pliki CSS i SCSS zostaną skompilowane do jednego pliku, który trafi do naszej aktywnej witryny. Użytkownik będzie musiał złożyć tylko jedno żądanie i pobierze pojedynczy plik, podczas gdy struktura projektu może składać się z setek zmodularyzowanych plików. Tak może wyglądać style.scss typowego projektu Sassa:

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

Nie powtarzaj się: zmienne

Każdy artykuł chwalący Sassa prawdopodobnie zacznie się od wzmianki o jego głównej funkcji — zmiennych. Najczęstszym zastosowaniem zmiennych jest paleta kolorów. Ile razy znalazłeś kilka deklaracji tego, co ma być tym samym kolorem, kończąc w CSS jako nieco inne odcienie, ponieważ nikt nie używa tego samego kodu szesnastkowego? Sass na ratunek. W Sassie możesz deklarować zmienne o niemal dowolnej wartości. Tak więc nasza paleta kolorów może wyglądać mniej więcej tak:

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

Słowa zaczynające się od „$” są zmiennymi Sassa. Oznacza to, że później w swoich arkuszach stylów będziesz mógł używać tych słów i zostaną one zmapowane na wartości, które zdefiniowałeś wcześniej:

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

Wyobraź sobie, jak mogłoby to zmienić 7184 wierszy kodu CSS, a już teraz możesz zacząć pragnąć Sassa. Co więcej, wyobraź sobie, że marka została przeprojektowana i musisz zaktualizować wszystkie kolory w swoim CSS. W Sassie jedyne, co musisz zrobić, to raz zaktualizować deklaracje tych zmiennych i baam! Zmiany będą dotyczyć wszystkich arkuszy stylów.

Zakodowałem ten przykład w Sassmeister, placu zabaw Sassa. Więc śmiało spróbuj zmienić te zmienne na coś innego.

Przydatność zmiennych nie ogranicza się tylko do kolorów, ale także do deklaracji czcionek, rozmiarów, zapytań o media i nie tylko. To naprawdę podstawowy przykład, który da ci pomysł, ale uwierz mi, możliwości Sassa są nieograniczone.

Czystszy kod źródłowy: zagnieżdżanie

Zagnieżdżanie może być prawdopodobnie drugą najczęściej wymienianą cechą Sassa. Kiedy wróciłem do waniliowego CSS po użyciu Sassa, plik CSS, który oglądałem, wydawał się tak zagracony, że nie byłem pewien, czy został zminimalizowany. Bez zagnieżdżania waniliowy CSS nie wygląda lepiej niż ładne wydrukowane pliki .min.css :

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

Dzięki zagnieżdżaniu możesz dodawać klasy między nawiasami klamrowymi deklaracji. Sass skompiluje i obsłuży selektory dość intuicyjnie. Możesz nawet użyć znaku „&”, aby uzyskać odniesienie do selektora nadrzędnego. Wracając do naszego przykładowego CSS, możemy przekształcić go do:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

Wygląda pięknie i jest łatwiejszy do odczytania. Zapraszam do zabawy z tym przykładem.

Jeszcze raz! Nie powtarzaj się: mixiny i rozszerzenia

Powtarzanie w CSS jest zawsze trudne do uniknięcia. I nie zaszkodzi podkreślić to trochę bardziej, zwłaszcza gdy Sass daje ci mixiny i rozszerzenia. Obie są potężnymi funkcjami i pomagają uniknąć wielu powtórzeń. Możliwości z domieszkami i rozszerzeniami wydają się nie mieć końca. Dzięki domieszkom możesz tworzyć sparametryzowane deklaracje CSS i używać ich ponownie w swoich arkuszach stylów.

Załóżmy na przykład, że masz moduł pudełkowy z przyciskiem w środku. Chcesz, aby obramowanie pudełka i tło przycisku miały ten sam kolor. Z waniliowym CSS robisz coś takiego:

 .box { border: 2px solid red; } .box .button { background: red; }

Powiedzmy, że chcesz teraz ten sam moduł pudełkowy, ale w innym kolorze. Dodasz coś takiego do swojego CSS:

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

Załóżmy teraz, że chcesz moduł pudełkowy, ale z cieńszą ramką. Dodałbyś:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

Dużo powtórzeń, prawda? Dzięki Sass możesz wyodrębnić te przypadki, aby zmniejszyć liczbę powtórzeń. Możesz zdefiniować mixin taki jak ten:

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

I tak, twój kod źródłowy można zredukować do:

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

Wygląda pięknie, prawda? Pobaw się z tym przykładem. Możesz stworzyć własną bibliotekę mixinów, a nawet lepiej użyć jednej z bibliotek społecznościowych.

Rozszerzenia są podobne, umożliwiają udostępnianie właściwości z jednego selektora do drugiego. Jednak zamiast wyprowadzać wiele deklaracji, wyświetlają listę klas bez powtarzania właściwości. W ten sposób możesz również uniknąć powtarzania kodu na wyjściu. Zapomnijmy o przyciskach w naszym poprzednim przykładzie i zobaczmy, jak @extend będzie działał z .boxes .

Załóżmy, że deklarujesz pierwsze pole:

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

Teraz potrzebujesz dwóch pudełek podobnych do tego, ale z różnymi kolorami obramowania. Możesz zrobić coś takiego:

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

Tak wyglądałby skompilowany CSS:

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

Potężny, prawda? Przykład znajdziesz tutaj. Jeśli przejrzysz wynikowy CSS, zdasz sobie sprawę, że klasa .box jest uwzględniana w wynikach. Jeśli nie chcesz tego zachowania, możesz połączyć @extend z „symbolami zastępczymi”. Symbol zastępczy to specjalny selektor, który nie wyświetla klasy w CSS. Na przykład czasami często resetuję domyślne style list. Generalnie używam @extend z takim symbolem zastępczym:

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

Następnie możesz ponownie użyć tego wzorca we wszystkich swoich arkuszach stylów:

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

Twój skompilowany CSS będzie wyglądał tak:

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

Sprawdź przykłady tutaj.

Czy jest więcej?

Absolutnie! Nie chciałem zbytnio komplikować tego artykułu, ale istnieje świat Sassy , ​​który czeka na Ciebie; jest też wiele innych funkcji: operacje, jednowierszowe komentarze z //, funkcje, pętle if… jeśli kiedykolwiek pomyślałeś „byłoby fajnie zrobić coś 'X' z CSS”, jestem pewien to „X” zostało już zrobione przez Sassa. „CSS z supermocami” to jego slogan, a to nie może być bliższe prawdy.

Wniosek

Idź i odwiedź stronę instalacji i zacznij hakować! Uwierz mi, nie pożałujesz.

Tak, istnieje kilka alternatyw dla Sassa. Inne preprocesory (LESS, Stylus), postprocesory, Grunt itp. Są nawet zmienne CSS. Nie twierdzę, że Sass jest jedyną dostępną technologią. Mówię tylko, że jest najlepszy! Przynajmniej na razie. Nie wierzysz w to, co mówię? Śmiało i spróbuj sam. Nie pożałujesz!