Tag: ‘SASS’

Skończ z CSS

niedziela, 29.12.2013

less-logo

Jakieś półtora roku temu natrafiłem na LESS.js. Od razu mnie zainteresował i stwierdziłem, że będzie można w tym stworzyć całkowicie modyfikowalną wizualnie aplikację. Koledzy, byli sceptyczni w ogóle w stosunku do LESS-a i sensu jego stosowania.

Przez ten cały czas miałem w głowie, że coś takiego istnieje, ale dopiero życie zmusiło mnie do skorzystania z tej technologii. W jednym z projektów, który był adresowany do osób niepełnosprawnych, było założenie by użytkownik mógł zmieniać kontrasty na stronie, zmieniać czcionkę i możliwie robić jakieś inne rzeczy.
I wtedy w mojej programistycznej „stajni” zadebiutował obok boostrap3. Co prawda, klient się wycofał z funkcjonalności, ale LESS pozostał i z tego się cieszę.

Czym jest LESS.js?

LESS jest jednym z wielu niedawno powstałych języków do dynamicznego tworzenia arkuszy stylów. W dwóch słowa: piszemy w LESS, a otrzymujemy wynikowo arkusz CSS.
Do rodzinki takich języków należą także: SASS, SCSS. Podstawy tych języków są podobne, ale każdy z nich ma garść czegoś innego do zaproponowania.

Dlaczego warto używać LESS/SASS/SCSS?

Zacznę od tego, że niewiele i bardzo skromne powody są ku temu by nie używać takich języków, no chyba że plik CSS ma jakieś marne 100 linijek.

Mały przykład, na którym widać ładne zagnieżdżenia:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { 
    font-size: 12px;
    a { 
      text-decoration: none;
      &:hover { 
        border-width: 1px;
      }
    }
  }
}

Drugi przykład to użycie mixins (za wiki)

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Zalet bez liku:

  • już same zastosowanie takich języków sprawia, że kod jest bardziej DRY, nie piszemy ciągle podobnie zagnieżdżonych sekwencji CSS, ale zagnieżdżamy selektory,
  • powyższe sprawia, że łatwo jest nam zmieniać taką strukturę, jest ona przy tym bardziej przejrzysta i oczywiście nie piszemy tych samych sekwencji selektorów po stokroć,
  • możemy stosować zmienne dla kolorów, nazywać je przy tym wg swojego klucza, a następnie używać je we wbudowanych funkcjach takich jak np. darken() ,
  • możemy także używać zmiennych do trzymania innych atrybutów, np. wielkości czcionki, adresu obrazka, czy nazwy fonta,
  • zgodnie z duchem DRY, możemy zastosować tzw. domieszki/mixins, które zachowują się jak funkcja w każdym innym języku programowania, do której też możemy wprowadzać argumenty,
  • możemy operować na parametrach liczbowych z użyciem prostej arytmetyki,
  • jeśli mamy zwykły CSS, kompilator po prostu go wstawi przy kompilacji, jest też możliwość „dekompilacji” CSS do LESS/SASS/..
  • jesteśmy w stanie sprawić (jeśli tylko będzie potrzeba lub chęć), że nasza aplikacja/strona będzie miała nieograniczone możliwości zmiany elementów wizualny czy to losowo, czy to przez klienta, czy to nawet przez użytkownika końcowego – prawda, że pięknie ? :)

Można by tak wymieniać i zagłębiać się w poszczególne języki, ale chyba lista powyżej sprawia, że chęć programowania i uciecha z programowania wzrasta, bo w końcu możemy… zaprogramować sobie CSS :)

Jak kompilować?

Sposobów na korzystanie z LESS/SASS/.. jest wiele. LESS w odróżnieniu od innych tego typu języków (w końcu LESS.js ;) ) ma możliwość modyfikacji w locie strony, bez przeładowania. Co, w pewnych okolicznościach może być piękne i mocno pomocne. Wystarczy wyobrazić sobie, że piszemy w naszym edytorze, zapisujemy plik less, a less watch zmienia nam elementy na stronie i to na każdej otwartej przeglądarce. Czyli, możemy pisać na jednym monitorze i zapisując, na drugim oglądać zmiany np. szerokości o 10px, po zmianach kod mamy już gotowy i zapisany, nie musimy niczego przeklejać.

Innymi sposobami na korzystanie z less/sass/.. to:

  • używanie dedykowany kompilatorów dla naszego języka programowania (np. php, python) – niewątpliwą zaletą takiego rozwiązania jest możliwość łatwego wdrożenia innych osób do naszych projektów, nie muszą one konfigurować swoich edytorów/IDE, nie muszą także instalować dodatkowego oprogramowania i konfigurować
  • edytory stworzone z myślą o CSS i LESS/SASS
  • kompilatory i wtyczki dla IDE
  • same kompilatory

 

Nie wiem, jak wy, ale ja nie chcę już wracać do czystego CSS, bo i po co? ;)