Preprocesory CSS porównane z Sass vs. LESS
Istnieje wiele CSS Preprocesor, LESS, Sass, Stylus i Swith CSS, żeby wymienić tylko kilka. Preprocesor CSS, Jak już często mówiliśmy, ma on przede wszystkim sprawić, by CSS był bardziej dynamiczny, zorganizowany i produktywny. Ale, pytanie brzmi, która z nich najlepiej wykonuje tę pracę?
Oczywiście nie oglądalibyśmy każdego z nich, zamiast tego porównamy tylko dwie bardziej popularne: Sass i LESS. Aby zdecydować, porównamy dwa z siedmiu czynników: ten, który działa lepiej, otrzymuje jeden punkt; w przypadku remisu obaj otrzymają jeden punkt.
Zaczynajmy.
Instalacja
Zacznijmy od bardzo podstawowego kroku, Instalacja. Zarówno Sass, jak i LESS są zbudowane na innej platformie, Sass działa na Rubim, podczas gdy LESS jest biblioteką JavaScript (którą było właściwie także zbudowany na Ruby najpierw).
Sass: Sass potrzebuje Rubiego, aby działał, w Macu został zainstalowany fabrycznie, ale w Windows prawdopodobnie musisz go zainstalować, zanim zaczniesz grać z Sass. Ponadto Sass musi być zainstalowany przez Terminal lub Wiersz polecenia. Istnieje kilka aplikacji GUI, których można używać na miejscu, ale nie są one bezpłatne.
MNIEJ: LESS jest zbudowany na JavaScript, więc intrygująca LESS jest tak prosta, jak połączenie biblioteki JavaScript z dokumentem HTML. Istnieje również kilka aplikacji GUI, które pomagają w kompilacji LESS do CSS, a większość z nich jest darmowa i działa bardzo dobrze (np. WinLess i LESS.app).
Wniosek: LESS jest wyraźnie na czele.
Rozszerzenia
Zarówno Sass, jak i LESS mają rozszerzenia umożliwiające szybsze i łatwiejsze tworzenie stron internetowych.
Sass: W naszym ostatnim poście omówiliśmy Compass, aktualne i popularne rozszerzenie oparte na Sassie. Compass ma wiele miksów do pisania składni CSS3 w krótszym czasie.
Ale Compass wykracza poza miksowanie CSS3, dodało też inne bardzo przydatne funkcje, takie jak pomocnicy, układ, typografia, układ siatki, a nawet obrazy Sprite. To także ma config.rb plik, w którym możemy kontrolować wyjście CSS i inne preferencje. Krótko mówiąc, Compass to pakiet „wszystko w jednym” do tworzenia stron internetowych w Sassie.
MNIEJ: LESS ma również kilka rozszerzeń, ale w przeciwieństwie do Compassa, który ma wszystko, czego potrzebujemy w jednym miejscu, są one rozdzielone i każdy z nich jest tworzony przez różnych programistów. Nie będzie to problemem dla doświadczonych użytkowników, ale dla tych, którzy dopiero zaczynają z LESS, muszą poświęcić trochę czasu, aby wybrać odpowiednie rozszerzenia, które pasują do ich przepływu pracy.
Oto kilka rozszerzeń LESS, które mogą być konieczne do uwzględnienia w projekcie:
- CSS3 Mixins: LESS Elements, Preboot, LESS Mixins.
- Krata: 960 gs, Bezramowe, Semantic.gs
- Układ: Nawet mniej
- Misc: Twitter Bootstrap
Wniosek: Myślę, że musimy zgodzić się z Sass i Compass to świetny duet, a funkcja obrazu Sprite jest naprawdę świetna, więc jeden punkt dla Sassa jest tutaj.
Języki
Każdy preprocesor CSS ma swój własny język i są one najczęściej spotykane. Na przykład zarówno Sass, jak i LESS mają zmienne, ale nie ma w nim znaczącej różnicy, z wyjątkiem Sassa, który definiuje zmienne za pomocą $ podpisać, gdy MNIE robi to za pomocą @ znak. Nadal robią to samo: zapisz stałą wartość.
Poniżej omówimy niektóre z najczęściej używanych języków, zarówno w Sass, jak i LESS (na podstawie moich doświadczeń).
Zagnieżdżanie
Reguła zagnieżdżania jest dobrą praktyką, aby uniknąć wielokrotnego pisania selektorów, a zarówno Sass, jak i LESS mają taki sam sposób w regułach zagnieżdżania;
Sass / Scss i LESS
nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; ul padding: 0; margines: 0;
Ale Sass / Scss idzie tą metodą o krok dalej, pozwalając nam także zagnieżdżać indywidualne właściwości, oto przykład:
nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; ul padding: 0; margines: 0; border: style: solid; left: width: 4px; kolor: # 333333; right: width: 2px; kolor: # 000000;
Ten kod wygeneruje następujące dane wyjściowe.
nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; border-style: solid; border-left-width: 4px; kolor obramowania w lewo: # 333333; border-right-width: 2px; border-right-color: # 000000; nav ul padding: 0; margines: 0;
Wniosek: Zagnieżdżanie poszczególnych właściwości jest miłym dodatkiem i jest brane pod uwagę najlepsze praktyki, zwłaszcza jeśli przestrzegamy zasady DRY (Don't Repeat Yourself). Myślę więc, że jasne jest, który z nich ma się lepiej w tym przypadku.
Mieszanki i dziedziczenie selektorów
Mieszanki w Sass i LESS są nieco inaczej zdefiniowane. W Sass używamy@mixin dyrektywy, podczas gdy w LESS definiujemy ją za pomocą selektora klasy. Oto przykład:
Sass / Scss
@mixin border-radius ($ values) border-radius: $ values; nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; @include border-radius (10px);
MNIEJ
.border (@radius) border-radius: @radius; nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; .border (10px);
Miksy, w Sass i LESS, są przyzwyczajone zawierać właściwości z jednego zestawu reguł do innego zestawu reguł. W Sass ta metoda jest dalej wykorzystywana Dziedziczenie selektora. Koncepcja jest identyczna, ale zamiast kopiować całe właściwości, Sass rozszerzy lub selektory grupowe, które mają te same właściwości i wartości przy użyciu @poszerzać dyrektywa.
Spójrz na poniższy przykład:
.circle border: 1px solid #ccc; border-radius: 50px; przepełnienie: ukryte; .avatar @extend .circle;
Ten kod spowoduje, że;
.circle, .avatar border: 1px solid #ccc; border-radius: 50px; przepełnienie: ukryte;
Wniosek: Sass jest o jeden krok do przodu dzięki odrębnemu dziedziczeniu mieszaczy i selektorów.
Operacje
Zarówno Sass, jak i LESS mogą wykonywać podstawowe operacje matematyczne, ale czasami zwracają różne wyniki. Zobacz, jak wykonują te losowe obliczenia:
Sass / Scss
$ margin: 10px; div margin: $ margin - 10%; / * Błąd składni: niezgodne jednostki: „%” i „px” * /
MNIEJ
@argarg: 10px; div margin: @argarg - 10%; / * = 0px * /
Wniosek: Sass, w tym przypadku, robi to dokładniej; ponieważ% i px nie są równoważne, powinien zwrócić błąd. Chociaż mam nadzieję, że może to być coś podobnego 10px - 10% = 9px.
Powiadomienia o błędzie
Powiadomienie o błędzie jest ważne, aby zobaczyć, co robimy źle. Wyobraź sobie tysiące linii kodu i odrobinę błędu gdzieś w chaosie. Czysty powiadomienie o błędzie będzie najlepszym sposobem szybkiego rozwiązania problemu.
Sass: W tym przykładzie używam wiersza polecenia do uruchomienia kompilatora. Sass wygeneruje powiadomienie o błędzie za każdym razem, gdy kod będzie nieważny. W tym przypadku usuniemy jeden średnik w linii 6, co powinno spowodować błąd. Spójrz na zrzut ekranu poniżej.
Kiedy po raz pierwszy zobaczyłem to powiadomienie, nie mogłem go zrozumieć. Poza tym wydaje się, że Sass jest nieco wyłączony w przypadku błędu. Powiedział, że błąd jest włączony linia 7, zamiast 6.
MNIEJ: Przy tym samym scenariuszu błędu powiadomienie LESS jest lepiej przedstawione i wydaje się być bardziej dokładne. Spójrz na ten zrzut ekranu:
Wniosek: LESS zapewnia lepsze wrażenia w tej kwestii i wygrywa.
Dokumentacja
Dokumentacja jest bardzo istotną częścią każdego produktu; nawet doświadczeni programiści mieliby trudności z robieniem rzeczy bez Dokumentacja.
Sass: Jeśli spojrzymy na dokumentację na oficjalnej stronie, osobiście czuję, że jestem w środku biblioteki, dokumentacja jest bardzo obszerna. Jednak wygląd i zachowanie, jeśli ma to dla ciebie znaczenie, nie jest motywujące do czytania, a tło jest proste.
Prezentacja jest bardziej podobna do dokumentacji W3 lub WikiPedia. Nie wiem, czy to jest standard wyświetlania dokumentacji w Internecie, ale to nie jedyny sposób.
MNIEJ: Z drugiej strony, dokumentacja LESS jest bardziej przejrzysta bez zbyt wielu wyjaśnień tekstowych i nurkuje bezpośrednio do przykładów. Ma też dobrą typografię i lepszy schemat kolorów. Myślę, że właśnie dlatego LESS przyciągnął moją uwagę przede wszystkim i mogę się tego nauczyć szybciej dzięki układowi i prezentacji dokumentacji.
Wniosek: Prezentacja dokumentacji LESS jest lepsza, chociaż Sass ma bardziej obszerną dokumentację, więc myślę, że możemy to nazwać krawatem.
Końcowa myśl
Myślę, że to jasny wniosek Sass jest lepszy z łącznym wynikiem 5 kontra 3 za mniej. Nie oznacza to jednak, że MNIEJ jest złe; po prostu muszą być lepsi. Ostatecznie decyzja użytkownika końcowego o wyborze preprocesora zależy od decyzji użytkownika końcowego. Czy to Sass, czy MNIEJSZY, o ile są wygodne i produktywne, to jest zwycięzcą na swojej liście.
Na koniec, jeśli masz coś na myśli na ten temat, nie krępuj się udostępnić go w polu komentarza poniżej.
