CSS, LESS, SASS/SCSS, który wybrać?

Czasy używania czystego CSS powoli odchodzą w niepamięć. Nie ma się co dziwić, pracę trzeba sobie ułatwiać a nie utrudniać. Wydaje mi się, że wśród początkujących częściej używany preprocesor to Less, zgaduję, że jest to spowodowane tym, że pod Sassa musimy przygotować trochę obszerniejsze środowisko aby móc go bezproblemowo kompilować… Może warto poświęcić trochę więcej czasu na konfiguracji kompa aby móc później działać w Sass?  A może wystarczy Less?

Odpowiedz sam sobie, niezależnie czy pracujesz na czystym Cssie, czy na Lessie, czy na Sassie, czy wiesz dlaczego pracujesz właśnie na nim? Czy jest to świadoma decyzja czy bardziej nieznajomość reszty?

No ale na początku, do nauki chyba CSS?

Czemu nie, o ile ta nauka nie trwa dłużej niż jeden dzień. Wyjątkiem może też być bardzo mały plik, bo nie oszukujmy się – mało komu będzie chciało się tworzyć pliki less czy sass do stylów, które mają 50 linii kodu.

Kiedyś czasy były inne i nauka Css była niejako podstawą, ale rozwój technologii doprowadził do tego, że wg mnie nie ma sensu obecnie spędzać zbyt wiele czasu nad czystym Cssem. Spokojnie, to nie będzie 'skok na głęboką wodę’ tylko bardziej 'wejście do jacuzzi’ – preprocesory Css są naprawdę łatwe i przyjemne;)

Jeżeli dopiero zaczynasz przygodę z front-endem to mam dla Ciebie dobrą wiadomość. Jeżeli używasz Less, Sass to znasz również Css, ale nie na odwrót. Dla niektórych, działających w JS może to być zdziwieniem, ponieważ pracując jQuery – wcale nie musisz potrafić pracować na czystym JS.

Less i Sass są tak naprawdę zwykłym Cssem z kilkoma bajerami. Już tłumaczę…

Na pierwszy rzut oka

Porównajmy tak na szybko, z grubsza jak skraca się kod z każdą technologią:

Css

#container{
  width: 800px;
  margin: 0 auto;
}
#container p{
  color: #dedede;
  font-size: 21px;
}
#container p a{
  color: #FF3300; //czerwony
  font-weight: bold;
}
#container p a:hover{
  color: ##FF3333; // jasny czerwony
}

Less

#container{
  width: 800px;
  margin: 0 auto;
  p{
    color: #dedede;
    font-size: 21px;
    a{
      color: #FF3300; //czerwony
      font-weight: bold;
      &:hover{
        color: ##FF3333; // jasny czerwony
      }
    }
  }
}

Sass

#container
  width: 800px
  margin: 0 auto
  p
    color: #dedede
    font-size: 21px
    a
      color: #FF3300
      font-weight: bold
      &:hover
        color: ##FF3333

Skrócenie kodu to nie wszystko. Dodajemy dodatkowo wiele udogodnień takich jak: zmienne, pętle, wyrażenia logiczne, cale funkcje, domieszki…

Less

Less jest trochę bardziej rozbudowaną wersją CSS. Najważniejsza rzecz jaką wprowadza są zagnieżdżenia, dzięki temu zaczyna to trochę przypominać języki programowania, ale przede wszystkim znacząco przyśpiesza pracę. Nie będę się rozpisywał czym się charakteryzuje ponieważ jest wiele artykułów i tutoriali na ten temat, np. http://less.kursbootstrap.pl, http://lesscss.org/

Wielkim plusem Less jest jego łatwość implementacji w projekcie. Praktycznie każdy edytor posiada wtyczki, które bezproblemowo automatycznie kompilują jego pliki. Są również skrypty JS, które robią to samo – ogólnie nie ma żadnych problemów aby w nim działać. Dodatkowo jest często polecany do nauki ponieważ jest bardzo podobny do czystego Cssa.

Sass

Sass jest potężniejszą wersją Lessa. Możemy w nim pominąć klamry, średniki to jeszcze bardziej przyśpiesza pracę. Poza tym Sass sam w sobie działa już trochę jak normalny język programowania. Szukasz czegoś do poważnych projektów? Sass jest dla Ciebie! Największym minusem dla nowych użytkowników jest poziom skomplikowania jego instalacji (wymaga, np. wcześniejszej instalacji node.js oraz node-sass lub Ruby a następnie jakiejś wtyczki/programu, który zajmie się kompilacją).  Więcej informacji nt sass możesz znaleźć tutaj: http://sass-lang.com/guide

Podsumowanie

Jeśli chodzi o ogólne możliwości tych technologii posegregowałbym je następująco: SASS > LESS > CSS. Końcowe zdanie jednak, którą opcję zastosować w danej sytuacji jest określenie czy faktycznie potrzebujemy czegoś takiego do projektu. O ile jest mało sensownym pisanie CSSa, który ma 1000 linii kodu, o tyle równie mało sensowne będzie tworzenie pliku SASS, który ma 10 linii kodu. Tak samo gdy projekt jest za duży na CSSa, ale i nie potrzebujesz możliwości Sass to warto zostać przy prostym i przyjemnym Lessie.

Ps. Istnieje jeszcze rozróżnienie samego Sassa na 2 podkategorie: scss i sass, których tutaj specjalnie nie omawiałem:)