Prosty i łatwy przewodnik do zrozumienia Sass
Jakiś czas temu Thoriq Firdaus napisał świetny artykuł o rozpoczęciu pracy z Sass, który pokazał, jak zainstalować i używać tego bardzo przydatnego języka preprocesora CSS (możesz to sprawdzić, wiesz, aby zacząć).
W tym artykule pomyślałem, że dam ci trochę więcej informacji na temat tego, co możesz zrobić z Sass i jak deweloperzy używają go każdego dnia do tworzenia lepszego i bardziej modułowego kodu CSS. Przejdź do wybranej sekcji:
- Narzędzia handlu
- Zmienne
- Zagnieżdżanie
- Rozszerzanie zestawów reguł
- Mieszanki
- Selektory symboli zastępczych
- Operacje
- Funkcje
Narzędzia handlu
Thoriq pokazał ci, jak możesz użyć Sassa z linii poleceń, używając sass - zegarek dowództwo.
Jeśli wolisz narzędzia GUI, możesz przejść do mojej ulubionej aplikacji, Codekit, narzędzia do tworzenia stron internetowych do kompilacji Sass, łączenia, autoprefixingu i wielu innych. Prepros to kolejna bardzo przydatna aplikacja, która może być używana we wszystkich systemach. Oba są aplikacje płatne ale są tego warte, jeśli będziesz ich używać na dłuższą metę.
Jeśli chcesz wypróbować Sassa bez płacenia za nic możesz korzystać z terminala lub Koali (tutaj jest nasza recenzja), bezpłatnej, wieloplatformowej, bogatej w funkcje aplikacji, która może przeciwstawić się odpowiednikom premium.
Zmienne
Jedną z pierwszych rzeczy, które musisz zawinąć, są zmienne. Jeśli pochodzisz z języka PHP lub innego podobnego języka kodowania, będzie to dla ciebie drugą naturą. Zmienne są dla przechowywanie bitów i fragmentów informacji wielokrotnego użytku, jak wartość koloru, na przykład:
$ primary_color: # 666666; .button color: $ primary_color; .important color: $ primary_color;
To może nie wydawać się tutaj przydatne, ale wyobraź sobie, że masz 3000 linii kodu. Jeśli zmienisz schemat kolorów, będziesz musiał zastąpić każdą wartość koloru w CSS. Z Sass możesz po prostu zmodyfikuj wartość z $ primary_color zmienna i być z nią zrobiona.
Zmienne są używane do przechowywanie nazw, rozmiarów, kolorów i wielu innych informacji. W przypadku większych projektów warto wyodrębnić wszystkie zmienne do osobnego pliku (przyjrzymy się, jak to się wkrótce stanie). Pozwala to na zmianę koloru całego projektu i zmianę czcionek oraz innych kluczowych aspektów bez dotykania rzeczywistych reguł CSS. Wszystko, co musisz zrobić, to zmodyfikować niektóre zmienne.
Zagnieżdżanie
Inną podstawową cechą Sassa jest możliwość zagnieżdżania reguł. Załóżmy, że budujesz menu nawigacyjne. Masz nav element zawierający nieuporządkowaną listę, elementy listy i łącza. W CSS możesz zrobić coś takiego:
#header nav / * Reguły dla obszaru nawigacji * / #header nav ul / * Reguły dla menu * / #header nav li / * Reguły dla elementów listy * / #header nav a / * Reguły dla linków * /
W selektorach powtarzamy się bardzo często. Jeśli elementy mają wspólne korzenie, możemy użyć zagnieżdżenia napisz nasze zasady w znacznie czystszy sposób.
Oto, jak powyższy kod może wyglądać w Sassie:
#header nav / * Reguły dla obszaru nawigacji * / ul / * Reguły dla menu * / li / * Reguły dla elementów listy * / a / * Reguły dla linków * /
Zagnieżdżanie jest niezwykle przydatne, ponieważ sprawia, że arkusze stylów (dużo) są bardziej czytelne. Używając zagnieżdżania razem z odpowiednim wcięciem, możesz osiągnąć bardzo czytelne struktury kodu, nawet jeśli masz sporą ilość kodu.
Jedną z wad zagnieżdżania jest to, że może prowadzić do niepotrzebnej specyfiki. W powyższym przykładzie nawiązałem kontakt z #header nav a. Możesz także użyć #header nav ul li a co byłoby prawdopodobnie za dużo.
W Sassie znacznie łatwiej jest być bardzo specyficznym, ponieważ wszystko, co musisz zrobić, to zagnieździć swoje reguły. Poniższe informacje są znacznie mniej czytelne i dość specyficzne.
#header nav / * Reguły dla obszaru nawigacji * / ul / * Reguły dla menu * / li / * Reguły dla elementów listy * / a / * Reguły dla linków * /
Rozszerzanie zestawów reguł
Rozszerzenie będzie znane, jeśli pracujesz z językami obiektowymi. Najlepiej zrozumieć to na przykładzie, stwórzmy 3 przyciski, które są małymi odmianami.
.button display: inline-block; kolor: # 000; tło: # 333; border-radius: 4px; padding: 8px 11px; .button-primary @extend .button; background: # 0091C2 .button-small @extend .button; rozmiar czcionki: 0,9em; dopełnienie: 3px 8px;
The .przycisk podstawowy i .przycisk mały wszystkie klasy rozszerzają .przycisk klasa, co oznacza, że przejmują wszystkie jej właściwości, a następnie definiują własne.
Jest to niezmiernie przydatne w wielu sytuacjach, w których można stosować odmiany elementu. Wiadomości (alert / sukces / błąd), przyciski (kolory, rozmiary), typy menu i tak dalej mogą korzystać z rozszerzającej się funkcjonalności w celu zwiększenia wydajności CSS.
Jedno zastrzeżenie rozszerzeń jest takie nie będą działać w zapytaniach o media jak można się spodziewać. Jest to nieco bardziej zaawansowane, ale możesz przeczytać wszystko o tym zachowaniu w Zrozumieniu selektorów symboli zastępczych - selektory symboli zastępczych są specjalnym rodzajem rozszerzenia, o którym powiemy wkrótce.
Mieszanki
Mieszanki są kolejną ulubioną cechą użytkowników preprocesora. Miksy to zestawy reguł wielokrotnego użytku - idealne dla reguł specyficznych dla dostawcy lub dla krótkich reguł CSS.
Jak utworzyć regułę przejścia dla elementów najechanych:
@mixing hover-effect -webkit-transition: kolor tła 200ms; -moz-transition: kolor tła 200ms; -o-przejście: kolor tła 200ms; przejście: kolor tła 200ms; a @include hover-effect; .button @include hover-effect;
Miksy umożliwiają także używanie zmiennych zdefiniuj wartości w miksie. Możemy przepisać powyższy przykład na daj nam kontrolę nad dokładnym czasem przejścia. Możemy na przykład chcieć, aby przyciski zmieniały się nieco wolniej.
@mixin hover-effect ($ speed) -webkit-transition: background-color $ speed; -moz-transition: background-color $ speed; -o-przejście: kolor tła $ prędkość; przejście: kolor tła $ prędkość; a @include hover-effect (200ms); .button @include hover-effect (300ms);
Selektory symboli zastępczych
Selektory symboli zastępczych zostały wprowadzone w Sass 3.2 i rozwiązały problem, który mógł spowodować nieco nadęty w wygenerowanym kodzie CSS. Spójrz na ten kod, który tworzy komunikaty o błędach:
.message font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solid; .message-danger @extend .message; tło: # C20030; kolor: #fff; kolor obramowania: # A8002A; .message-success @extend .message; tło: # 7EA800; kolor: #fff; kolor obramowania: # 6B8F00;
Najprawdopodobniej klasa wiadomości nigdy nie zostanie użyta w naszym HTML: tak było stworzony do rozszerzenia, a nie używany w takiej postaci. Powoduje to trochę nadęty w wygenerowanym CSS. Aby zwiększyć wydajność kodu, możesz użyć selektora symbolu zastępczego oznaczonego znakiem procentu:
% message font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solid; .message-danger @extend% button; tło: # C20030; kolor: #fff; kolor obramowania: # A8002A; .message-success @extend% button; tło: # 7EA800; kolor: #fff; border-color: # 6D9700;
Na tym etapie możesz się zastanawiać, jaka jest różnica między rozszerzeniami a miksami. Jeśli używasz symboli zastępczych, zachowują się jak mixin bez parametrów. To prawda, ale wyniki w CSS są różne. Różnica polega na tym miksuje zduplikowane reguły podczas symbole zastępcze upewnią się, że selektory współdzielą te same reguły, w rezultacie mniej CSS.
Operacje
Trudno oprzeć się tutaj grze słów, ale na razie powstrzymam się od jakichkolwiek żartów medycznych. Operatorzy pozwalają ci na odrobinę matematyki w kodzie CSS i mogą być bardzo pomocni. Przykład w przewodniku Sass jest idealny do zaprezentowania tego:
.pojemnik szerokość: 100%; article float: left; szerokość: 600px / 960px * 100%; aside float: right; szerokość: 300px / 960px * 100%;
Powyższy przykład tworzy system siatki oparty na 960px przy minimalnych kłopotach. Kompiluje się ładnie do następującego CSS:
.pojemnik szerokość: 100%; article float: left; szerokość: 62,5%; aside float: right; szerokość: 31,25%;
Wielkie zastosowanie, które znajduję w operacjach, polega na mieszaniu kolorów. Jeśli spojrzysz na wiadomość o sukcesie Sassa powyżej, nie jest jasne, czy kolor tła i obramowania ma jakiś związek. Odejmując odcień szarości, możemy przyciemnić kolor, dzięki czemu relacja będzie widoczna:
$ primary: # 7EA800; .message-success @extend% button; background: $ primary; kolor: #fff; border-color: $ primary - # 111;
Im jaśniejszy kolor odejmowany, tym ciemniejszy będzie uzyskany odcień. Im jaśniejszy jest dodany kolor, tym jaśniejszy jest uzyskany odcień.
Funkcje
Istnieje wiele funkcji do wykorzystania: funkcje liczbowe, funkcje łańcuchowe, funkcje listy, funkcje kolorów i inne. Spójrz na długą listę w dokumentacji dla programistów. Spojrzę na parę tutaj, żeby pokazać ci, jak działają.
The rozjaśnić i zaciemniać Funkcja może być używana do zmiany jasności koloru. Jest to lepsze niż odejmowanie odcieni, sprawia, że wszystko jest jeszcze bardziej modułowe i oczywiste. Spójrz na nasz poprzedni przykład, używając funkcji zaciemnienia.
$ primary: # 7EA800; .message-success @extend% button; background: $ primary; kolor: #fff; border-color: darken ($ primary, 5);
Drugim argumentem funkcji jest procent wymaganego zaciemnienia. Wszystkie funkcje mają parametry; spójrz na dokumentację, aby zobaczyć, czym one są! Oto kilka innych, oczywistych funkcji kolorów: desaturat, nasycić, odwracać, skala szarości.
The stropować funkcja, podobnie jak w PHP, zwraca liczbę zaokrągloną do następnej liczby całkowitej. Można tego użyć podczas obliczania szerokości kolumn lub jeśli nie chcesz używać dużej liczby miejsc dziesiętnych w końcowym CSS.
.title font-size: ceil ($ header_size * 1.3314);
Przegląd
Funkcje w Sass dają nam ogromną moc do pisania lepszego CSS przy mniejszym wysiłku. Właściwe użycie miksów, rozszerzeń, funkcji i zmiennych sprawi, że nasze arkusze stylów będą łatwiejsze do utrzymania, bardziej czytelne i łatwiejsze do napisania.
Jeśli jesteś zainteresowany innym podobnym preprocesorem CSS, sugeruję przyjrzenie się LESS (lub zapoznaj się z naszym przewodnikiem dla początkujących) - podstawowa zasada jest taka sama!
