poniedziałek, 2024-02-26

Język Less

„Less” (Leaner CSS) to powstały w 2009 roku dynamiczny język arkuszy stylów (dynamic stylesheet language), który rozszerza możliwości CSS. Pozwala na używanie funkcji, które nie są dostępne (lub nie były) w standardowym CSS, takich jak zmienne, mieszanki (ang. mixins), funkcje i operacje. Less jest przetwarzany w kod CSS za pomocą specjalnego kompilatora.

Główne możliwości Less

Less jest kompilowany do standardowego CSS, co oznacza, że każda przeglądarka, która obsługuje CSS, będzie również wspierać style napisane w Less po ich skompilowaniu. Jest to przydatne w dużych projektach, gdzie zarządzanie i utrzymanie stylami CSS może być trudne bez użycia dodatkowych narzędzi, takich jak właśnie Less.

• Zmienne – pozwalają na ponowne wykorzystanie wartości przez cały arkusz stylów. Na przykład, można zdefiniować zmienną dla koloru, a następnie używać tej zmiennej w różnych miejscach arkusza stylów.
• Mieszanki (Mixins) – umożliwiają ponowne wykorzystanie całych klas lub grup właściwości. Dzięki nim można włączyć właściwości jednej klasy do innej klasy.
• Funkcje i operacje – pozwalają na manipulację wartościami, np. można dodawać, odejmować, mnożyć i dzielić wartości.
• Zagnieżdżanie – umożliwia zagnieżdżanie selektorów wewnątrz innych selektorów. To sprawia, że struktura arkusza stylów jest czystsza i bardziej zorganizowana.
• Przestrzenie nazw i sekcje – pozwalają na grupowanie zmiennych i mieszanki, co pomaga w organizacji kodu.
• Importowanie – Less umożliwia importowanie jednego pliku Less do innego, co ułatwia zarządzanie arkuszami stylów w większych projektach.

Jak korzystać z Less?

Kompilacja LESS do CSS

Najczęściej stosowaną metodą jest kompilacja plików LESS do CSS, co można zrobić na kilka sposobów.

Kompilacja „ręczna”

Użyj narzędzia kompilującego Less na swoim komputerze (na przykład lessc, kompilatora napisanego w Node.js) do przekształcenia plików Less w pliki CSS. Następnie po prostu dołącz skompilowany plik CSS do swojej strony internetowej w standardowy sposób, używając tagu <link> w nagłówku HTML.

Kompilacja przez narzędzia deweloperskie

Możesz użyć narzędzi takich jak Webpack, Gulp lub Grunt do automatyzacji procesu kompilacji LESS do CSS. Te narzędzia mogą automatycznie kompilować pliki LESS za każdym razem, gdy zostaną zmodyfikowane.

Kompilacja w Chmurze

Istnieją usługi w chmurze, które umożliwiają kompilację LESS do CSS. W ten sposób nie musisz konfigurować narzędzi kompilacji na swoim lokalnym komputerze.

Kompilacja Less

Możesz również używać Less bezpośrednio w przeglądarce. Obejmuje to dołączenie właściwych plików do strony internetowej i użycie skryptu JavaScript w celu kompilacji Less do CSS w czasie rzeczywistym. Jest to jednak zazwyczaj używane tylko w celach deweloperskich, ponieważ kompilacja w przeglądarce może wpływać na wydajność strony. W środowisku produkcyjnym zawsze lepiej jest używać wcześniej skompilowanego pliku CSS.

Aby zrobić to w ten sposób, umieść plik LESS w swoim projekcie tak, jak robisz to z plikami CSS, jedyna różnica to wartość atrybutu rel: rel="stylesheet/less". Następnie dołącz skrypt kompilatora Less do kodu swojej strony, znajdziesz go na oficjalnej stronie internetowej projektu. Możesz także nie pobierać tego pliku i odwołać się do wersji dostępnej w Internecie tak jak w poniższym przykładzie. Skrypt less.js automatycznie przetworzy pliki LESS i wygeneruje CSS, który będzie używany przez przeglądarkę.

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less" ></script>

Przykłady

Oczywiście, przedstawię kilka prostych przykładów kodu LESS i odpowiadające im wynikowe kody CSS.

W każdym z tych przykładów Less umożliwia bardziej dynamiczne i modularne podejście do pisania CSS, co może znacznie ułatwić zarządzanie stylami, zwłaszcza w większych projektach.

Zmienne

Uwaga: Obecnie zmienne to element CSS szeroko wspierany przez popularne przeglądarki stron internetowych.

Kod less:

@primary-color: #4CAF50;

.button {
  color: white;
  background-color: @primary-color;
}

Wynikowy CSS:

.button {
  color: white;
  background-color: #4CAF50;
}

Mieszanki (Mixins)

Kod less:

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.box {
  .border-radius(10px);
}

Wynikowy CSS:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Zagnieżdżanie

Kod less:

.navbar {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
   a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Wynikowy CSS:

.navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar li {
  display: inline-block;
}

.navbar  a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Operacje

Uwaga: Obecnie CSS zawiera funkcję calc().

Kod less:

@base-spacing: 10px;

.padding {
  padding: @base-spacing * 2;
}

.margin {
  margin: @base-spacing / 2;
}

Wynikowy CSS:

.padding {
  padding: 20px;
}

.margin {
  margin: 5px;
}