Less (język arkusza stylów) - Less (stylesheet language)

Mniej

Zaprojektowany przez	Alexis Sellier
Deweloper	Alexis Sellier, Dmitrij Fadeyev
Po raz pierwszy pojawiły się	2009 ; 12 lat temu ( 2009 )
Wersja stabilna	4.1.1 / 30 stycznia 2021 ; 5 miesięcy temu ( 2021-01-30 )
Dyscyplina pisania	Dynamiczny
Język implementacji	JavaScript
OS	Wieloplatformowy
Licencja	Licencja Apache 2.0
Rozszerzenia nazw plików	.mniej
Stronie internetowej	lesscss .org
Wpływem
CSS , Sass
Pod wpływem
Sass , mniej frameworka, Bootstrap (v3)

Less (Leaner Style Sheets; czasami stylizowany jako LESS ) to dynamiczny język arkuszy stylów preprocesora , który można skompilować w kaskadowe arkusze stylów (CSS) i uruchomić po stronie klienta lub serwera. Zaprojektowany przez Alexis Sellier, Less jest pod wpływem Sassa i wpłynął na nowszą składnię „SCSS” Sassa, która dostosowała składnię formatowania bloków podobną do CSS. Less to projekt open source . Jego pierwsza wersja została napisana w języku Ruby ; jednak w późniejszych wersjach użycie Rubiego zostało przestarzałe i zastąpione przez JavaScript . Składnia Less z wcięciem jest zagnieżdżonym metajęzykiem , ponieważ poprawny CSS jest poprawnym kodem Less z tą samą semantyką . Less udostępnia następujące mechanizmy: zmienne , zagnieżdżanie , domieszki , operatory i funkcje ; główna różnica między Lessem a innymi prekompilatorami CSS polega na tym, że Less umożliwia kompilację w czasie rzeczywistym przez przeglądarkę less.js.

funkcje

Zmienne

Less umożliwia definiowanie zmiennych. Zmienne w Less są zdefiniowane za pomocą znaku (@). Przypisanie zmiennych odbywa się za pomocą dwukropka (:).

Podczas tłumaczenia wartości zmiennych są wstawiane do wyjściowego dokumentu CSS.

@pale-green-color: #4D926F;

#header {
  color: @pale-green-color;
}
h2 {
  color: @pale-green-color;
}

Powyższy kod w programie Less skompiluje się do następującego kodu CSS.

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mieszanki

Mixins umożliwia osadzenie wszystkich właściwości klasy w innej klasie, dołączając nazwę klasy jako jedną z jej właściwości, zachowując się w ten sposób jako rodzaj stałej lub zmiennej. Mogą również zachowywać się jak funkcje i przyjmować argumenty. CSS nie obsługuje domieszek: każdy powtarzający się kod musi być powtórzony w każdej lokalizacji. Domieszki pozwalają na wydajniejsze i czystsze powtarzanie kodu, a także łatwiejszą zmianę kodu.

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

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

Powyższy kod w Lessie skompilowałby się do następującego kodu CSS:

#header {
  -webkit-border-radius: 5px 10px 8px 2px;
  -moz-border-radius: 5px 10px 8px 2px;
  border-radius: 5px 10px 8px 2px;
}
#footer {
  -webkit-border-radius: 10px 25px 35px 0px;
  -moz-border-radius: 10px 25px 35px 0px;
  border-radius: 10px 25px 35px 0px;
}

Less ma specjalny typ zestawu reguł zwany domieszkami parametrycznymi, które można mieszać w podobne klasy, ale akceptuje parametry.

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

Powyższy kod w Lessie skompilowałby się do następującego kodu CSS:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 16px;
}
#header p a {
  text-decoration: none;
  color: red;
}
#header p a:hover {
  border-width: 1px;
  color: #fff;
}

Funkcje i operacje

Mniej pozwala na operacje i funkcje. Operacje umożliwiają dodawanie, odejmowanie, dzielenie i mnożenie wartości właściwości i kolorów, które można wykorzystać do tworzenia złożonych relacji między właściwościami. Funkcje mapują jeden do jednego z kodem JavaScript, umożliwiając manipulowanie wartościami.

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 3;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Powyższy kod w Lessie skompilowałby się do następującego kodu CSS:

#header {
  color: #333;
  border-left: 1px;
  border-right: 3px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

Porównanie

Sass

Zarówno Sass, jak i Less są preprocesorami CSS, które umożliwiają pisanie czystego CSS w konstrukcji programistycznej zamiast reguł statycznych.

Mniej inspiruje Sass. Sass został zaprojektowany zarówno w celu uproszczenia, jak i rozszerzenia CSS, więc takie rzeczy jak nawiasy klamrowe zostały usunięte ze składni. Less został zaprojektowany tak, aby był jak najbardziej zbliżony do CSS, dzięki czemu istniejący CSS może być używany jako prawidłowy kod Less.

Nowsze wersje Sass wprowadziły również składnię podobną do CSS o nazwie SCSS (Sassy CSS).

Używaj w witrynach

Mniej można zastosować do witryn na wiele sposobów. Jedną z opcji jest dołączenie pliku JavaScript less.js , aby przekonwertować kod w locie. Przeglądarka następnie renderuje wyjściowy kod CSS. Inną opcją jest renderowanie kodu Less do czystego CSS i przesłanie CSS do witryny. Dzięki tej opcji żadne pliki .less nie są przesyłane, a strona nie wymaga konwertera JavaScript less.js.

Mniej oprogramowania

Zobacz też

• Sass (język arkusza stylów)
• Rysik (język arkusza stylów)

Bibliografia

Linki zewnętrzne

• Oficjalna strona internetowa
• Mniej repozytorium kodu źródłowego (Git)
• Biblioteka mixinów MESS Hat
• Sai rozszerzenie mixins i framework do tworzenia CSS dla LESS & SASS/SCSS (Git)
• MNIEJ Placu Zabaw