Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Sass vs. LESS vs. Stylus: Preprocessor Shootout

by
Difficulty:IntermediateLength:LongLanguages:

Polish (Polski) translation by Władysław Łucyszyn (you can also view the original English article)

Wykorzystanie prawdziwej mocy preprocesora CSS to przygoda. Istnieje niezliczona liczba języków, składni i funkcji, które są gotowe do użycia już teraz.

W tym artykule omówimy różne funkcje i zalety korzystania z trzech różnych preprocesorów - Sass, LESS i Stylus.


Wprowadzenie

Preprocesory tworzą CSS, który działa we wszystkich przeglądarkach.

Preprocesory CSS3 są językami napisanymi wyłącznie w celu dodania do CSS fajnych, pomysłowych funkcji bez przerywania kompatybilności przeglądarki. Robią to, kompilując kod, który piszemy do zwykłego CSS, który może być użyty w dowolnej przeglądarce do czasów kamienia. Istnieją tysiące funkcji, które preprocesorzy wprowadzają na rynek, aw tym artykule omówimy niektóre z nagłośnionych i niektóre z nie tak nagłośnionych. Zacznijmy.


Składnia

Najważniejszą częścią pisania kodu w preprocesorze CSS jest zrozumienie składni. Na szczęście dla nas składnia jest (lub może być) identyczna ze zwykłym CSS dla wszystkich trzech preprocesorów.

Sass & LESS

Sass i LESS używają standardowej składni CSS. Dzięki temu niezwykle łatwo jest przekonwertować istniejący plik CSS na jeden z preprocesorów. Sass używa rozszerzenia pliku .scss, a LESS używa rozszerzenia .less. Podstawowy plik Sass lub LESS można skonfigurować jak poniżej:

Jak zapewne zauważyliście, jest to po prostu zwykły CSS, który doskonale kompiluje się zarówno w Sassie, jak iw LESS.

Ważne jest, aby pamiętać, że Sass ma również starszą składnię, która pomija średniki i nawiasy klamrowe. Chociaż nadal jest w pobliżu, jest stary i nie będziemy go używać za tym przykładem. Składnia używa rozszerzenia pliku .sass i wygląda następująco:

Stylus

Składnia Stylus jest znacznie bardziej szczegółowa. Korzystając z rozszerzenia pliku .styl, Stylus akceptuje standardową składnię CSS, ale akceptuje również inne warianty, w których nawiasy, dwukropki i średniki są opcjonalne. Na przykład:

Używanie różnych wersji tego samego arkusza stylów jest również poprawne, więc poniższe zostaną skompilowane bez błędów.


Zmienne

Zmienne mogą być deklarowane i używane w całym arkuszu stylów. Mogą mieć dowolną wartość, która jest wartością CSS (np. Kolory, liczby [jednostki włączone] lub tekst.) I mogą być przywoływane w dowolnym miejscu w całym naszym arkuszu stylów.

Sass

Zmienne Sass są poprzedzone znakiem $, a wartość i nazwa są oddzielone średnikiem, tak jak własność CSS.

LESS

Zmienne LESS są dokładnie takie same jak zmienne Sass, z wyjątkiem nazw zmiennych poprzedzonych znakiem @.

Stylus

Zmienne stylusa nie wymagają niczego, co można do nich dodać, chociaż pozwala na użycie symbolu $. Jak zwykle, końcowy średnik nie jest wymagany, ale znak równości między wartością a zmienną jest. Należy zwrócić uwagę na to, że Stylus (0.22.4) kompiluje się, jeśli dodamy symbol @ do nazwy zmiennej, ale nie zastosujemy tej wartości w przypadku odwołania. Innymi słowy, nie rób tego.

Skompilowany CSS

Każdy z powyższych plików zostanie skompilowany do tego samego pliku CSS. Możesz użyć swojej wyobraźni, aby zobaczyć, jak przydatne mogą być zmienne. Nie będziemy już musieli zmieniać jednego koloru i musielibyśmy go powtórzyć dwadzieścia razy lub chcieliśmy zmienić szerokość naszej strony i musieliśmy się rozejrzeć, aby ją znaleźć. Oto CSS po kompilacji:


Zagnieżdżanie

Jeśli potrzebujemy odniesienia do wielu elementów z tym samym rodzicem w naszym CSS, może być nużące ciągłe pisanie tego rodzica.

Zamiast tego, używając preprocesora, możemy zapisać selektory dzieci w nawiasach rodzica. Ponadto symbol & odwołuje się do selektora nadrzędnego.

Sass, LESS, & Stylus

Wszystkie trzy preprocesory mają tę samą składnię dla selektorów zagnieżdżania.

Skompilowany CSS

To jest skompilowany CSS z powyższego kodu. Jest dokładnie tak samo, jak wtedy, gdy zaczynaliśmy - jak wygodnie!


Mixins

Mixiny to funkcje, które pozwalają na ponowne wykorzystanie właściwości w całym naszym arkuszu stylów. Zamiast przechodzić przez nasz arkusz stylów i zmieniać obiekt wiele razy, możemy teraz po prostu zmienić go w naszym mixin. Może to być przydatne w przypadku konkretnej stylizacji elementów i prefiksów dostawców. Kiedy wywoływane są mixiny z selektora CSS, argumenty mixin są rozpoznawane, a style wewnątrz mixin są stosowane do selektora.

Sass

LESS

Stylus

Skompilowany CSS

Wszystkie preprocesory kompilują się do tego samego kodu poniżej:


Dziedzictwo

Podczas pisania CSS w staroświecki sposób możemy użyć następującego kodu, aby zastosować te same style do wielu elementów naraz:

Działa to świetnie, ale jeśli musimy indywidualnie nadać styl poszczególnym elementom, każdy z nich musi stworzyć inny selektor, który szybko stanie się bałaganiarski i trudniejszy w utrzymaniu. Aby temu przeciwdziałać, można użyć dziedziczenia. Dziedziczenie to zdolność innych selektorów CSS do dziedziczenia właściwości innego selektora.

Sass & Stylus

Skompilowany CSS (Sass i Stylus)

LESS

LESS naprawdę nie obsługuje dziedziczenia stylów takich jak Sass i Stylus. Zamiast dodawać wiele selektorów do jednego zestawu właściwości, traktuje dziedziczenie jak mixin bez argumentów i importuje style do własnych selektorów. Wadą tego jest to, że właściwości są powtarzane w skompilowanym arkuszu stylów. Oto, jak skonfigurować:

Skompilowany kod CSS (LESS)

Jak widać, style z .block zostały wstawione do selektorów, do których chcemy przekazać dziedziczenie. Ważne jest, aby pamiętać, że priorytet może stać się problemem, więc bądź ostrożny.


Importowanie

W społeczności CSS importowanie CSS jest niezadowolone, ponieważ wymaga wielu żądań HTTP. Jednak importowanie za pomocą preprocesora działa inaczej. Jeśli importujesz plik z dowolnego z trzech preprocesorów, dosłownie dołączymy import podczas kompilacji, tworząc tylko jeden plik. Pamiętaj jednak, że importowanie zwykłych plików .css kompiluje się z domyślnym @import "file.css"; kod. Zmienne i zmienne mogą być importowane i używane w głównym arkuszu stylów. Importowanie sprawia, że tworzenie osobnych plików dla organizacji jest bardzo opłacalne.

Sass, LESS, & Stylus

Skompilowany CSS


Funkcje kolorów

Funkcje kolorów są wbudowane w funkcje, które zmieniają kolor podczas kompilacji. Może to być niezwykle użyteczne przy tworzeniu gradientów, ciemniejszych kolorów w zawisie i wielu innych.

Sass

To tylko krótka lista dostępnych funkcji kolorów w Sass, pełna lista dostępnych funkcji kolorów Sass znajduje się w dokumentacji Sass.

Funkcje kolorów mogą być używane wszędzie tam, gdzie dany kolor jest prawidłowy CSS. Oto przykład:

LESS

Listę wszystkich funkcji LESS można znaleźć czytając dokumentację LESS.

Oto przykład użycia funkcji kolorów w LESS:

Stylus

Pełną listę wszystkich funkcji kolorów Stylus można znaleźć, czytając dokumentację Stylus.

Oto przykład użycia kolorowych funkcji Stylus:


Operacje

Robienie matematyki w CSS jest całkiem użyteczne, a teraz jest w pełni możliwe. To proste i tak to zrobić:

Sass, LESS & Stylus


Praktyczne zastosowania

Omówiliśmy wiele funkcji i rzeczy, które mogą zrobić preprocesory, ale nie omówiliśmy niczego praktycznego ani praktycznego. Oto krótka lista rzeczywistych aplikacji, w których korzystanie z preprocesora to oszczędność.

Prefiksy dostawców

Jest to jeden z powodów, dla których warto używać preprocesora z bardzo dobrego powodu - oszczędza mnóstwo czasu i łez. Tworzenie mixin do obsługi prefiksów dostawców jest łatwe i pozwala zaoszczędzić wiele powtórzeń i bolesną edycję. Oto jak to zrobić:

Sass

LESS

Stylus

Skompilowany CSS

Tekst 3D

Fałszowanie tekstu 3D za pomocą wielu text-shadows to sprytny pomysł. Jedynym problemem jest to, że zmiana koloru po fakcie jest trudna i uciążliwa. Korzystając z różnych funkcji i kolorów, możemy stworzyć tekst 3D i zmienić kolor w locie!

Sass

LESS

Stylus

Wybrałem napisanie cieni Stylus text-shadows w jednym wierszu, ponieważ pominąłem nawiasy klamrowe.

Skompilowany CSS

Wynik końcowy

Kolumny

Używanie operacji liczbowych i zmiennych dla kolumn to pomysł, który wymyśliłem, kiedy po raz pierwszy grałem z preprocesorami CSS. Deklarując pożądaną szerokość w zmiennej, możemy łatwo zmienić ją w dół drogi bez żadnej mentalnej matematyki. Oto jak to zrobić:

Sass

LESS

Stylus

Skompilowany CSS


Znane dziwactwa

Istnieje kilka dziwnych sposobów korzystania z preprocesora CSS. Mam zamiar przejrzeć kilka zabawnych, ale jeśli naprawdę chcesz je wszystkie znaleźć, polecam przeszukać dokumentację lub, jeszcze lepiej, po prostu zacząć używać preprocesora w swoim codziennym kodowaniu.

Zgłaszanie błędów

Jeśli napisałeś CSS przez jakiś przyzwoity czas, jestem pewien, że osiągnąłeś punkt, gdzie gdzieś się pojawił błąd i po prostu nie mogłeś go znaleźć. Jeśli jesteś kimś takim jak ja, prawdopodobnie spędziłeś popołudnie wyciągając włosy i komentując różne rzeczy, by upolować błąd.

Preprocesory CSS zgłaszają błędy. To takie proste. Jeśli coś jest nie tak z twoim kodem, mówi ci gdzie i jeśli masz szczęście: dlaczego. Możesz sprawdzić ten wpis na blogu, jeśli chcesz zobaczyć, jak zgłaszane są błędy w różnych preprocesorach.

Komentarze

Podczas kompilowania za pomocą preprocesora CSS usuwany jest dowolny komentarz o podwójnym wycinaniu (np. //comment) i pozostawia się komentarz z komentarzem slash-aster (np. /* comment */). Mówiąc to, użyj podwójnego slasha do komentarzy, które chcesz umieścić na niezespolonej stronie i slash-asterysku do komentarzy, które chcesz widzieć po kompilacji.

Uwaga: jeśli skompilujesz minified, wszystkie komentarze zostaną usunięte.


Wniosek

Każdy preprocesor CSS, który omówiliśmy (Sass, LESS i Stylus) ma swój własny unikalny sposób realizacji tego samego zadania - dając programistom możliwość korzystania z przydatnych, nieobsługiwanych funkcji przy zachowaniu zgodności przeglądarki i czystości kodu.

Chociaż nie jest to wymagane do rozwoju, preprocesory mogą zaoszczędzić wiele czasu i mają kilka bardzo przydatnych funkcji.

Zachęcam wszystkich do wypróbowania jak największej liczby preprocesorów, tak abyście mogli skutecznie wybrać ulubionego i wiedzieć, dlaczego jest on faworyzowany w stosunku do wielu innych. Jeśli jeszcze nie próbowałeś używać preprocesora do pisania swojego CSS, bardzo polecam spróbować.

Czy masz ulubioną funkcję preprocesora CSS, o której nie wspomniałem? Czy jest coś, co można zrobić, a co innego nie może? Daj nam znać w komentarzach poniżej!

Specjalne podziękowania dla Karissy Smith, super-utalentowanej przyjaciółki, która stworzyła miniaturkę podglądu tego artykułu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.