Kurs LESS – błyskawiczne tworzenie stylów CSS

Jeśli jesteś Web Developerem, który nie miał jeszcze do czynienia z preprocesorami CSS, to ten artykuł jest dla Ciebie. W ciągu kilkunastu minut poznasz i zaczniesz korzystać z najbardziej użytecznych elementów preprocesora LESS.

W tym artykule omówimy i przećwiczymy najważniejsze zagadnienia LESS. Po przeczytaniu będziesz mógł natychmiast użyć LESS w swoich projektach. Tematy, które poruszymy:

• krótki wstęp do LESS
• wsparcie plików .less w edytorze
• zagnieżdżanie
• zmienne
• mixiny
• importowanie

Czym jest LESS?

LESS jest preprocesorem CSS z bardzo podobną składnią. LESS zawiera mnóstwo przydatnych funkcjonalności, które niesamowicie przyśpieszają pracę front-end developera. Jak to wygląda w praktyce?

@import 'reset.less';

@tablet: ~"only screen and (min-width: 768px)";
@color: #00405d;

.responsive-background(@path) {
  background-image: url(@path);
  background-size: cover;
  background-position: center;
}

div {
  width: 100%;
  .responsive-background('images/background.jpg');
  @media @tablet {
    width: 80%;
  }
  a {
    color: @color;
    &:hover {
      color: lighten(@color, 75%);
    }
  }
}

Powyższy kod:

• importuje plik reset.less
• ustawia tło diva
• zmienia szerokość diva w zależności od rozdzielczości
• rozjaśnia link o 75% po najechaniu na niego kursorem

Podświetlanie składni w plikach .less

Część edytorów kodu nie rozpoznaje plików LESS (.less) lub wymaga instalacji dodatkowych pakietów. Wśród edytorów, które wspierają LESS bez dodatkowych instalacji, mogę polecić Atom i Brackets.

Przed przejściem dalej upewnij się, że Twój  edytor prawidłowo podświetla składnie. Utwórz plik style.less i wklej do niego powyższy kod. Jeśli poszczególne elementy kodu różnią się kolorem, to możesz przejść do kolejnej części.

Kompilacja kodu LESS do CSS

Style napisane w LESS nie mówią nic przeglądarce. Musimy je najpierw skompilować do kodu CSS.  Pomoże nam w tym Koala – program, który wykryje wszystkie zmiany w plikach .less i zamieni je na .css. Pliki CSS podepniemy następnie do strony.

Aby pobrać Koala, wejdź na tę stronę i naciśnij przycisk Download. Po instalacji otwórz program. Pokaże się podobne okno:

Abyś nie tracił czasu na tworzenie struktury plików, zrobiłem to za Ciebie. Gotowy folder możesz pobrać tutaj. Po pobraniu i wypakowaniu archiwum otwórz okno Koala i przeciągnij folder less  w obszar okna.

Od tej pory przy każdym zapisie dowolnego z plików całość będzie kompliowana – nie musimy tego robić ręcznie.

Funkcjonalności LESS

Posiadasz już edytor podświetlający prawidłowo składnie plików .less i program Koala, który kompiluje te pliki do .css. Możemy teraz przejść do funkcjonalności LESS.

Zagnieżdżanie

Zagnieżdżanie to jedna z funkcjonalności, dzięki której zaoszczędzisz najwięcej czasu. Jednocześnie jest bardzo proste i możesz z niego skorzystać natychmiast. Jak to działa?

W pliku style.less wpisz kod:

ul {
  list-style: none;
  li {
    display: inline-block;
    padding: 5px 20px;
    a {
      text-decoration: none;
      text-transform: uppercase;
      font-weight: 500;
      color: #333;
      &.active {
        color: #444;
      }
      &:hover{
        color: #444;
      }
    }
  }
}

Zapisz style.less i otwórz style.css:

ul {
  list-style: none;
}
ul li {
  display: inline-block;
  padding: 5px 20px;
}
ul li a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
  color: #333;
}
ul li a.active {
  color: #444;
}
ul li a:hover {
  color: #444;
}

Jak widzisz kod zapisany w LESS, został przepisany w CSS. Zagnieżdżanie umożliwia użycie selektora jednorazowo. Znacznik ul w kodzie LESS użyty jest tylko raz.  Kod jest krótszy i bardziej przejrzysty. Edycja kodu LESS jest również znacznie prostsza.

Zmienne

Zmienne są kolejną funkcjonalnością, która potrafi zaoszczędzić mnóstwo czasu. Jak działają?

W pliku style.less wpisz kod:

@tablet: ~"only screen and (min-width: 768px)";
@desktop: ~"only screen and (min-width: 1200px)";
@green: #27ae60;
@primary-font: 'Roboto', sans-serif;
@secondary-font: 'Oswald', sans-serif;

body {
  font-family: @primary-font;
  background: @green;
  h1, h2, h3, h4, h5 {
    font-family: @secondary-font;
  }
  section {
    width: 100%;
    @media @tablet {
      width: 90%;
    }
    @media @desktop {
      width: 80%;
    }
  }
  a {
    color: @green;
  }
}

Zapisz style.less i otwórz style.css:

body {
  font-family: 'Roboto', sans-serif;
  background: #27ae60;
}
body h1,
body h2,
body h3,
body h4,
body h5 {
  font-family: 'Oswald', sans-serif;
}
body section {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  body section {
    width: 90%;
  }
}
@media only screen and (min-width: 1200px) {
  body section {
    width: 80%;
  }
}
body a {
  color: #27ae60;
}

Wartości zmiennych zostały podstawione w CSS. Zmienne szczególnie przydają się podczas edycji stylów strony. Zamiast zmieniać kolor odnośników w kilkudziesięciu miejscach, możesz to zrobić tylko w zmiennej. Nowa wartość zostanie podstawiona automatycznie.

Zmienne sprawdzają się świetnie w media queries. Wystarczy, że na początku stylów umieścisz zmienne:

@tablet: ~"only screen and (min-width: 768px)";
@desktop: ~"only screen and (min-width: 1200px)";

Następnie możesz ich używać w ten sposób:

.sidebar {
  display: none;
  @media @tablet {
    display: block;
    width: 30%;
  }
  @media @desktop {
    width: 20%;
  }
}

Element z klasą sidebar będzie niewidoczny poniżej 768px szerokości. Pomiędzy 768px a 1200px będzie miał 30% szerokości. Powyżej 1200px szerokość zmniejszy się do 20%.

Mixiny

Mixiny pozwalają na utworzenie zestawu reguł wielokrotnego użytku. Dzięki nim możesz dołączyć wszystkie właściwości jednej klasy do drugiej. Jak to zrobić?

W pliku style.less wpisz kod:

.green-circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: green;
}

div {
  .green-circle;
}

section {
  .green-circle;
}

Zapisz style.less i otwórz style.css:

div {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: green;
}
section {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: green;
}

Zestaw reguł został podstawiony do obu elementów.

Możemy rozszerzyć funkcjonalność mixin przez dodanie parametrów.

W pliku style.less wpisz kod:

.green-circle(@size) {
  border-radius: 50%;
  width: @size;
  height: @size;
  background: green;
}

div {
  .green-circle(150px);
}

section {
  .green-circle(300px);
}

Zapisz style.less i otwórz style.css:

div {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background: green;
}
section {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  background: green;
}

Widzisz już pewnie jakie możliwości dają mixiny w LESS. Używaj ich zawsze, gdy te same reguły występują w wielu miejscach.

Operacje

Operacje umożliwiają przeprowadzanie prostych operacji matematycznych wewnątrz kodu CSS. Możesz ich używać na:

• liczbach (np. 300px)
• kolorach (np. #893251)
• zmiennych

Jak działają?

W pliku style.less wpisz kod:

@color: #893251;
@width: 300px;

div {
  background: #893251 / 2;
  width: 300px * 2;
}

section {
  background: @color * 2;
  width: @width / 2; 
}

Zapisz style.less i otwórz style.css:

div {
  background: #451929;
  width: 600px;
}
section {
  background: #ff64a2;
  width: 150px;
}

Importowanie

Importowanie w LESS pozwala na połączenie kilku plików .less w jeden końcowy .css.  Jak to działa w praktyce?

// Zmienne i mixiny
@import "variables.less";
@import "mixins.less";

// Reset
@import 'reset.less';

// Wspólne elementy
@import 'header.less';
@import 'footer.less';

// Strony
@import 'frontpage.less';
@import 'about.less';
@import 'team.less';
@import 'contact.less';

Taki podział plików znacznie ułatwi późniejszą edycję. Wszystkie pliki zostaną skompilowane do wynikowego .css.

Podsumowanie

Przy pierwszym zetknięciu z LESS nie byłem przekonany. Całkiem wygodnie pisało mi się już w klasycznym CSS i nie chciałem przyzwyczajać się do „nowej” składni. Po pierwszym projekcie wiedziałem, że do klasycznego CSS już nie wrócę.

Użycie LESS zaoszczędzi Ci wiele godzin powtarzalnej pracy nad stylami strony.

Masz pytania? Zadaj je w komentarzu 🙂