MNIEJ - Szybki przewodnik

LESS to preprocesor CSS, który umożliwia dostosowywanie, zarządzanie i wielokrotnego użytku arkusz stylów dla witryny internetowej. LESS to dynamiczny język arkuszy stylów, który rozszerza możliwości CSS. LESS jest również przyjazny dla różnych przeglądarek.

CSS Preprocessor to język skryptowy, który rozszerza CSS i jest kompilowany do zwykłej składni CSS, dzięki czemu może być odczytywany przez Twoją przeglądarkę internetową. Zapewnia funkcje, takie jak zmienne , funkcje , miksery i operacje, które pozwalają budować dynamiczny CSS.

Dlaczego MNIEJ?

Zrozummy teraz, dlaczego używamy MNIEJ.

• LESS obsługuje szybsze i łatwiejsze tworzenie czystszego, przyjaznego dla różnych przeglądarek CSS.

• LESS jest zaprojektowany w JavaScript, a także stworzony do użytku na żywo , który kompiluje się szybciej niż inne preprocesory CSS.

• LESS utrzymuje twój kod w sposób modułowy, co jest naprawdę ważne, ponieważ czyni go czytelnym i łatwym do zmiany.

• Szybszą konserwację można osiągnąć dzięki zastosowaniu MNIEJ zmiennych .

Historia

LESS zostało zaprojektowane przez Alexis Sellierw 2009 roku. LESS jest oprogramowaniem typu open source. Pierwsza wersja LESS została napisana w języku Ruby; w późniejszych wersjach użycie Rubiego zostało zastąpione przez JavaScript.

funkcje

• Czystszy i czytelniejszy kod można napisać w zorganizowany sposób.

• Możemy definiować style i używać ich w całym kodzie.

• LESS jest oparty na JavaScript i jest super zestawem CSS.

• LESS to zwinne narzędzie, które rozwiązuje problem nadmiarowości kodu.

Zalety

• MNIEJ łatwo generuje CSS, który działa w różnych przeglądarkach.

• MNIEJ umożliwia pisanie lepszego i lepiej zorganizowanego kodu przy użyciu zagnieżdżania .

• Konserwację można osiągnąć szybciej dzięki zastosowaniu zmiennych .

• LESS umożliwia łatwe ponowne użycie całych klas poprzez odniesienie do nich w zestawach reguł.

• LESS zapewnia wykorzystanie operacji, które przyspieszają kodowanie i oszczędzają czas.

Niedogodności

• Potrzeba czasu, aby dowiedzieć się, czy nie masz doświadczenia z przetwarzaniem wstępnym CSS.

• Ze względu na ścisłe powiązania między modułami, należy dołożyć większych starań, aby ponownie wykorzystać i / lub przetestować moduły zależne.

• LESS ma mniej frameworka w porównaniu do starszego preprocesora, takiego jak SASS, który składa się z frameworków Compass , Gravity i Susy .

W tym rozdziale krok po kroku zrozumiemy, jak zainstalować LESS.

Wymagania systemowe dla LESS

• Operating System - Wiele platform

• Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Instalacja LESS

Rozumiemy teraz instalację LESS.

Step 1 - Potrzebujemy NodeJsuruchomić MNIEJ przykładów. Aby pobrać NodeJs, otwórz łączehttps://nodejs.org/en/, zobaczysz ekran, jak pokazano poniżej -

Pobierz najnowszą wersję pliku zip.

Step 2- Uruchom instalację, aby zainstalować Node.js w swoim systemie.

Step 3- Następnie zainstaluj MNIEJ na serwerze za pośrednictwem NPM (Node Package Manager). Uruchom następujące polecenie w wierszu polecenia.

npm install -g less

Step 4 - Po pomyślnej instalacji LESS zobaczysz następujące wiersze w wierszu polecenia -

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

Przykład

Poniżej znajduje się prosty przykład LESS.

hello.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

Stwórzmy teraz plik style.less, który jest dość podobny do CSS, jedyną różnicą jest to, że zostanie zapisany z rozszerzeniem .less . W folderze należy utworzyć pliki .html i .lessnodejs.

bezszyjkowy

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

Skompiluj plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Po uruchomieniu powyższego polecenia automatycznie utworzy plik style.css . Za każdym razem, gdy zmieniasz plik LESS, konieczne jest uruchomienie powyższego polecenia wcmda następnie plik style.css zostanie zaktualizowany.

Plik style.css będzie miał następujący kod po uruchomieniu powyższego polecenia -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Wynik

Wykonajmy teraz następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku hello.htm plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Opis

Jest to grupa właściwości CSS, która umożliwia wykorzystanie właściwości jednej klasy do innej klasy i zawiera nazwę klasy jako jej właściwości. W LESS możesz zadeklarować mixin w taki sam sposób, jak styl CSS, używając selektora class lub id. Może przechowywać wiele wartości i w razie potrzeby można go ponownie wykorzystać w kodzie.

Przykład

Poniższy przykład demonstruje użycie zagnieżdżonych reguł w pliku LESS -

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>First Heading</h1>
         <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
         <div class = "myclass">
            <h1>Second Heading</h1>
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
         </div>
      </div>
   </body>
</html>

Następnie utwórz plik style.less .

bezszyjkowy

.container {
   h1 {
      font-size: 25px;
      color:#E45456;
   }
   p {
      font-size: 25px;
      color:#3C7949;
   }

   .myclass {
      h1 {
         font-size: 25px;
         color:#E45456;
      }
      p {
         font-size: 25px;
         color:#3C7949;
      }
   }
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.container h1 {
   font-size: 25px;
   color: #E45456;
}

.container p {
   font-size: 25px;
   color: #3C7949;
}

.container .myclass h1 {
   font-size: 25px;
   color: #E45456;
}

.container .myclass p {
   font-size: 25px;
   color: #3C7949;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku nested_rules.html plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Opis

Dyrektywy, takie jak media i klatki kluczowe, można zagnieżdżać w ten sam sposób, w jaki sposób zagnieżdżasz selektory. Możesz umieścić dyrektywę na górze, a jej elementy względne nie zostaną zmienione w zestawie reguł. Nazywa się to procesem bulgotania.

Przykład

Poniższy przykład demonstruje użycie zagnieżdżonych dyrektyw i propagacji w pliku LESS -

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Następnie utwórz plik style.less .

bezszyjkowy

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku nested_directives_bubbling.html plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Opis

LESS obsługuje niektóre operacje arytmetyczne, takie jak plus (+), minus (-), mnożenie (*) i dzielenie (/) i mogą operować na dowolnej liczbie, kolorze lub zmiennej. Operacje oszczędzają dużo czasu, gdy używasz zmiennych i masz ochotę pracować nad prostą matematyką.

Przykład

Poniższy przykład demonstruje użycie operacji w pliku LESS -

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Następnie utwórz plik style.less .

bezszyjkowy

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku operations.html plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Opis

Buduje selektory dynamicznie i używa właściwości lub wartości zmiennej jako dowolnego ciągu.

Przykład

Poniższy przykład demonstruje użycie zmiany znaczenia w pliku LESS -

<html>
   <head>
      <title>Less Escaping</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Escaping</h1>
      <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

Teraz utwórz plik style.less .

bezszyjkowy

p {
   color: ~"green";
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie, automatycznie utworzy plik style.css z następującym kodem -

style.css

p {
   color: green;
}

Wszystko, co jest napisane wewnątrz ~ "jakiś_tekst", zostanie wyświetlone jako jakiś_tekst po skompilowaniu MNIEJ kodu do kodu CSS.

Wynik

Wykonajmy teraz następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku escaping.html plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Opis

LESS odwzorowuje kod JavaScript z manipulacją wartościami i używa predefiniowanych funkcji do manipulowania aspektami elementów HTML w arkuszu stylów. Zapewnia kilka funkcji do manipulowania kolorami, takimi jak funkcja okrągła, funkcja podłogi, funkcja sufitu, funkcja procentowa itp.

Przykład

Poniższy przykład demonstruje użycie funkcji w pliku LESS -

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Teraz utwórz plik style.less .

bezszyjkowy

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Teraz wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku functions.html plik.

• Otwórz ten plik HTML w przeglądarce, wyświetli się następujący wynik.

Opis

Przestrzenie nazw służą do grupowania elementów mieszanych pod wspólną nazwą. Korzystając z przestrzeni nazw, można uniknąć konfliktów nazw i hermetyzować grupę domieszek z zewnątrz.

Przykład

Poniższy przykład demonstruje użycie przestrzeni nazw i metod dostępu w pliku LESS -

<html>
   <head>
      <title>Less Namespaces and Accessors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Namespaces and Accessors</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Teraz utwórz plik style.less .

bezszyjkowy

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku namespaces_accessors.html plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Opis

Zakres zmiennej określa miejsce dostępnej zmiennej. Zmienne będą wyszukiwane z zakresu lokalnego, a jeśli nie są dostępne, kompilator wyszuka z zakresu nadrzędnego.

Przykład

Poniższy przykład demonstruje użycie przestrzeni nazw i metod dostępu w pliku LESS -

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Teraz utwórz plik style.less .

bezszyjkowy

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku scope.html plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Opis

Komentarze sprawiają, że kod jest jasny i zrozumiały dla użytkowników. Możesz użyć zarówno stylu blokowego, jak i komentarzy w kodzie, ale podczas kompilowania kodu MNIEJ, komentarze jednowierszowe nie pojawią się w pliku CSS.

Przykład

Poniższy przykład demonstruje użycie komentarzy w pliku LESS -

<html>
   <head>
      <title>Less Comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Comments</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
   </body>
</html>

Teraz utwórz plik style.less .

bezszyjkowy

/* It displays the
green color! */
.myclass {
   color: green;
}

// It displays the blue color
.myclass1 {
   color: red;
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Teraz wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

/* It displays the
green color! */
.myclass {
   color: green;
}

.myclass1 {
   color: red;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku comments.html plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Opis

Służy do importowania zawartości plików LESS lub CSS.

Przykład

Poniższy przykład demonstruje użycie importu w pliku LESS -

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

Teraz utwórz plik myfile.less .

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

Teraz utwórz plik style.less .

bezszyjkowy

@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

Plik myfile.less , który zostanie zaimportowany do style.less ze ścieżkihttps://www.tutorialspoint.com/less/myfile.less

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku importing.html plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

W tym rozdziale omówimy zmienne w LESS. LESS umożliwia definiowanie zmiennych za pomocą symbolu @. Zmiennej Przypisanie odbywa się za pomocącolon(:).

Poniższa tabela szczegółowo przedstawia użycie zmiennych LESS .

Extend to LESS pseudoklasa, która rozszerza inne style selektorów w jednym selektorze za pomocą :extend selektor.

Przykład

Poniższy przykład demonstruje użycie rozszerzenia w pliku LESS -

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

Następnie utwórz plik style.less .

bezszyjkowy

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

Można skompilować extend.less plik extend.css za pomocą polecenia następujące -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku extend_syntax.htm plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Rozszerz składnię

Rozszerzenie jest umieszczane w zestawie reguł lub dołączane do selektora. Jest podobny do pseudoklasy zawierającej jedną lub więcej klas, które są oddzielone przecinkami. Korzystanie z opcjonalnego słowa kluczowegoall, można śledzić każdy selektor.

Przykład

Poniższy przykład demonstruje użycie składni rozszerzenia w pliku LESS -

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

Teraz utwórz plik style.less .

bezszyjkowy

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku extend_syntax.htm plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

W poniższej tabeli wymieniono wszystkie typy składni rozszerzenia, których można używać w LESS -

Poniżej przedstawiono typy przypadków użycia do rozszerzenia

Miksery są podobne do funkcji w językach programowania. Domieszki to grupa właściwości CSS, które umożliwiają używanie właściwości jednej klasy dla innej klasy i zawierają nazwę klasy jako jej właściwości. W LESS możesz zadeklarować mixin w taki sam sposób, jak styl CSS, używając selektora class lub id. Może przechowywać wiele wartości i w razie potrzeby można go ponownie wykorzystać w kodzie.

Poniższa tabela szczegółowo demonstruje użycie MNIEJ mieszanin .

Przykład

Poniższy przykład demonstruje użycie mixinów w pliku LESS -

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Mixins</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "p1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
      <p class = "p3">LESS is cross browser friendly.</p>
   </body>
</html>

Następnie utwórz plik style.less .

bezszyjkowy

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

Możesz skompilować style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku less_mixins.html plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Nawiasy są opcjonalne podczas wywoływania miksów. W powyższym przykładzie oba stwierdzenia.p1(); i .p1; Zrobić to samo.

Opis

Miksery parametryczne używają jednego lub więcej parametrów, które rozszerzają funkcjonalność LESS poprzez przyjmowanie argumentów i jego właściwości w celu dostosowania wyjścia miksera po zmieszaniu go z innym blokiem.

Rozważmy na przykład prosty MNIEJSZY fragment kodu -

.border(@width; @style; @color) {
   border: @width @style @color;
}

.myheader {
   .border(2px; dashed; green);
}

Tutaj używamy parametrycznego mixinu jako .border z trzema parametrami - szerokością, stylem i kolorem. Używając tych parametrów, możesz dostosować wyjście miksera za pomocą przekazanych wartości parametrów.

W poniższej tabeli opisano różne typy miksów parametrycznych wraz z opisem.

W tym rozdziale zrozumiemy znaczenie Mixins as Functions. Podobnie jak funkcje, mixins mogą być zagnieżdżane, mogą akceptować parametry i zwracać wartości.

Poniższa tabela szczegółowo demonstruje użycie mikserów jako funkcji.

Opis

Odłączony zestaw reguł zawiera zestawy reguł, takie jak właściwości, zagnieżdżone zestawy reguł, deklaracje zmiennych, mieszanki itp. Jest przechowywany w zmiennej i zawarty w innej strukturze; wszystkie właściwości zestawu reguł są kopiowane do tej struktury.

Przykład

Poniższy przykład pokazuje, jak przekazać zestaw reguł do mieszania w pliku LESS -

pass_ruleset.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

Następnie utwórz plik style.less .

bezszyjkowy

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku passing_ruleset.htm plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Zakres

Wszystkie zmienne i kombinacje w odłączonym zestawie reguł są dostępne wszędzie tam, gdzie zestaw reguł został wywołany lub zdefiniowany. W przeciwnym razie zarówno obiekt wywołujący, jak i zakresy definicji są domyślnie dostępne. Zakres deklaracji ma priorytet, gdy oba zakresy zawierają ten sam mixin lub zmienną. Odłączona treść zestawu reguł jest zdefiniowana w zakresie deklaracji. Nie zmienia swojego zakresu po skopiowaniu odłączonego zestawu reguł z jednej zmiennej do drugiej.

W poniższej tabeli wymieniono wszystkie typy zakresów -

Opis

Plik @importDyrektywa służy do importowania plików w kodzie. Rozprowadza MNIEJ kodu na różne pliki i pozwala łatwo zachować strukturę kodu. Instrukcje @import można umieścić w dowolnym miejscu kodu.

Na przykład możesz zaimportować plik za pomocą @importsłowo kluczowe jako @import "nazwa_pliku.less" .

Rozszerzenia plików

Możesz użyć instrukcji @import w zależności od różnych rozszerzeń plików, takich jak -

• Jeśli używasz rozszerzenia .css , zostanie ono uznane za CSS, a instrukcja @import pozostanie niezmieniona.

• Jeśli zawiera jakiekolwiek inne rozszerzenie, będzie traktowane jako MNIEJ i zostanie zaimportowane.

• Jeśli nie ma LESS rozszerzenia, zostanie dołączone i dołączone jako importowany plik LESS.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Przykład

Poniższy przykład demonstruje użycie zmiennej w pliku SCSS -

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

Następnie utwórz plik import_dir.less .

import_dir.less

.myline {
   font-size: 20px;
}

Teraz utwórz plik style.less .

bezszyjkowy

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

Import_dir.less plik dostanie importowane do style.less pliku od ścieżkihttps://www.tutorialspoint.com/less/import_dir.less.

Możesz skompilować style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku import_directives.html plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

W tym rozdziale zrozumiemy znaczenie Import Optionsw mniej. MNIEJ oferuje@import instrukcja, która umożliwia arkuszom stylów importowanie arkuszy stylów LESS i CSS.

W poniższych tabelach wymieniono dyrektywy importu, które zostaną zaimplementowane w instrukcjach importu.

Dozwolone jest użycie więcej niż jednego słowa kluczowego w @import należy jednak używać przecinków do oddzielania słów kluczowych.

Na przykład -

@import (less, optional) "custom.css";

Opis

Jeśli chcesz dopasować proste wartości lub liczbę argumentów w wyrażeniach, możesz skorzystać z zabezpieczeń. Jest to związane z deklaracją mieszanki i zawiera warunek, który jest dołączony do mieszanki. Każdy mikser będzie miał jednego lub więcej strażników oddzielonych przecinkiem; strażnik musi być ujęty w nawiasach. LESS zamiast tego używa chronionych mikserówif/else instrukcje i wykonuje obliczenia, aby określić dopasowany mixin.

W poniższej tabeli opisano różne typy osłon mikserów wraz z opisem.

Przykład

Poniższy przykład demonstruje użycie strażników mixin w pliku LESS -

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

Teraz utwórz plik style.less .

bezszyjkowy

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

Możesz skompilować style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku mixin-guard.html plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Opis

Strażniki służą do dopasowywania prostych wartości lub wielu argumentów w wyrażeniach. Jest stosowany do selektorów CSS. Jest to składnia do deklarowania mixinu i natychmiastowego wywoływania go. Aby skutecznie wydobyćifinstrukcja typu; dołącz do tej funkcji&, co pozwala na grupowanie wielu strażników.

Przykład

Poniższy przykład demonstruje użycie css strażnik w pliku LESS -

css_guard.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

Następnie utwórz plik style.less .

bezszyjkowy

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.style {
   background-color: blue;
   color: white;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku css_guard.htm plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

W tym rozdziale zrozumiemy, jak pętle działają w LESS. Instrukcja Loops umożliwia wielokrotne wykonanie instrukcji lub grupy instrukcji. Różne struktury iteracyjne / pętlowe mogą być tworzone, gdy mieszanie rekurencyjne łączy się zGuard Expressions i Pattern Matching.

Przykład

Poniższy przykład demonstruje użycie pętli w pliku LESS -

loop_example.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web. </p>
      </div>
   </body>
</html>

Następnie utwórz plik style.less .

bezszyjkowy

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku loop_example.htm plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Opis

Ta funkcja w LESS umożliwia dodawanie wartości do listy oddzielonej przecinkami lub spacjami z wielu właściwości przy użyciu jednej właściwości. Może być używany jako tło i właściwości transformacji.

W poniższej tabeli opisano dwa typy funkcji obsługiwanych przez funkcję scalania.

W tym rozdziale zrozumiemy, jak to zrobić Parent Selectorspraca. Możliwe jest odwołanie się do selektora nadrzędnego za pomocą&(znak ampersand). Selektory nadrzędne reguły zagnieżdżonej są reprezentowane przez& operator i jest używany podczas stosowania modyfikującej klasy lub pseudoklasy do istniejącego selektora.

W poniższej tabeli przedstawiono typy selektora nadrzędnego -

Przykład

Poniższy przykład demonstruje użycie selektora rodzica w pliku LESS -

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

Następnie utwórz plik style.less .

bezszyjkowy

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

W powyższym przykładzie & odnosi się do selektora a.

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

• Zapisz powyższy kod HTML w pliku parent_selector1.htm plik.

• Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.

Selektorów Parent operator ma wiele zastosowań, takich jak, kiedy trzeba połączyć selektorów zagnieżdżonego regule w inny sposób niż domyślny. Inne typowe użycie&polega na wielokrotnym generowaniu nazw klas. Aby uzyskać więcej informacji, kliknij tutaj .

Funkcje różne składają się z grupy funkcji różnego rodzaju.

W poniższej tabeli wymieniono wszystkie typy funkcji dodatkowych -

Opis

Less obsługuje niektóre funkcje ciągów wymienione poniżej -

• escape
• e
• % format
• replace

W poniższej tabeli opisano powyższe funkcje łańcuchowe wraz z opisem.

escape("Hello!! welcome to Tutorialspoint!")

Hello%21%21%20welcome%20to%20Tutorialspoint%21

filter: e("Hello!! welcome to Tutorialspoint!");

filter: Hello!! welcome to Tutorialspoint!;

%(string, arguments ...)

format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");

format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";

replace("Welcome, val?", "val\?", "to Tutorialspoint!");

"Welcome, to Tutorialspoint!"

Opis

LESS składa się z funkcji listowych, które służą do określenia długości listy i pozycji wartości na liście.

Poniższa tabela zawiera listę funkcji używanych w LESS -

Opis

Funkcje matematyczne obejmują metody, które są używane do wykonywania operacji numerycznych, takich jak zaokrąglenie, pierwiastek kwadratowy, wartość potęgi, moduł, procent itp.

Poniższa tabela przedstawia funkcje matematyczne używane w LESS -

ceil(0.7)

1

floor(3.3)

3

percentage(0.2)

20%

round(3.77)

4

sqrt(25)

5

abs(30ft)

30ft

sin(2)

0.90929742682

asin(1)

1.5707963267948966

cos(2)

-0.4161468365471424

acos(1)

0

tan(60)

0.320040389379563

atan(1)

0.7853981633974483

pi()

3.141592653589793

pow(3,3)

27

mod(7,3)

1

min(70,30,45,20)

20

max(70,30,45,20)

70

W tym rozdziale zrozumiemy znaczenie Type Functionsw mniej. Służą do określenia typu wartości.

W poniższej tabeli przedstawiono funkcje typu używane w LESS.

isnumber(1234);       // true
isnumber(24px);       // true
isnumber(7.8%);       // true
isnumber(#fff);       // false
isnumber(red);        // false
isnumber("variable"); // false
isnumber(keyword);    // false
isnumber(url(...));   // false

isstring("variable"); // true
isstring(1234);       // false
isstring(24px);       // false
isstring(7.8%);       // false
isstring(#fff);       // false
isstring(red);        // false
isstring(keyword);    // false
isstring(url(...));   // false

iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false

iskeyword(keyword);   // true
iskeyword(1234);      // false
iskeyword(24px);      // false
iskeyword(7.8%);      // false
iskeyword(#fff);      // false
iskeyword(red) ;      // false
iskeyword("variable");// false
iskeyword(url(...));  // false

isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false

ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false

isem(0.5em);            // true
isem(1234);             // false
isem(24px);             // false
isem(keyword);          // false
isem(#fff);             // false
isem(red) ;             // false
isem("variable");       // false
isem(url(...));         // false

ispercentage(7.5%);       // true
ispercentage(url(...));   // false
ispercentage(keyword);    // false
ispercentage(1234);       // false
ispercentage(24px);       // false
ispercentage(#fff);       // false
ispercentage(red) ;       // false
ispercentage("variable"); // false

isunit(10px, px);       // true
isunit(5rem, rem);      // true
isunit(7.8%, '%');      // true
isunit(2.2%, px);       // false
isunit(24px, rem);      // false
isunit(48px, "%");      // false
isunit(1234, em);       // false
isunit(#fff, pt);       // false
isunit("mm", mm);       // false

@rules: {
   color: green;
}

isruleset(@rules);      // true
isruleset(1234);        // false
isruleset(24px);        // false
isruleset(7.8%);        // false
isruleset(#fff);        // false
isruleset(blue);        // false
isruleset("variable");  // false
isruleset(keyword);     // false
isruleset(url(...));    // false

Opis

LESS zapewnia szereg przydatnych funkcji do zmiany kolorów i manipulowania nimi na różne sposoby. LESS obsługuje niektóre z funkcji definicji kolorów, jak pokazano w poniższej tabeli -

rgb(220,20,60)

#dc143c

rgba(220,20,60, 0.5)

rgba(220, 20, 60, 0.5)

argb(rgba(176,23,31,0.5))

#80b0171f

hsl(120,100%, 50%)

#00ff00

hsla(0,100%,50%,0.5)

rgba(255, 0, 0, 0.5);

hsv(80,90%,70%)

#7db312

hsva(80,90%,70%,0.6)

rgba(125, 179, 18, 0.6)

W tym rozdziale zrozumiemy znaczenie funkcji kanału koloru w LESS. LESS obsługuje kilka wbudowanych funkcji, które ustawiają wartość kanału. Kanał ustawia wartość w zależności od definicji koloru. Kolory HSL mają kanał odcienia, nasycenia i jasności, a kolor RGB ma kanał czerwony, zielony i niebieski. W poniższej tabeli wymieniono wszystkie funkcje kanałów kolorów -

background: hue(hsl(75, 90%, 30%));

background: 75;

background: saturation(hsl(75, 90%, 30%));

background: 90%;

background: lightness(hsl(75, 90%, 30%));

background: 30%;

background: hsvhue(hsv(75, 90%, 30%));

background: 75;

background: hsvsaturation(hsv(75, 90%, 30%));

background: 90%;

background: hsvvalue(hsv(75, 90%, 30%));

background: 30%;

background: red(rgb(5, 15, 25));

background: 5;

background: green(rgb(5, 15, 25));

background: 15;

background: blue(rgb(5, 15, 25));

background: 25;

background: alpha(rgba(5, 15, 25, 1.5));

background: 2;

background: luma(rgb(50, 250, 150));

background: 71.2513323%;

background: luminance(rgb(50, 250, 150));

background: 78.53333333%;

Opis

LESS zapewnia szereg przydatnych funkcji operacyjnych do zmiany i manipulowania kolorami na różne sposoby oraz przyjmowania parametrów w tych samych jednostkach. LESS obsługuje niektóre funkcje obsługi kolorów, jak pokazano w poniższej tabeli -

W tym rozdziale zrozumiemy Color Blending Functionsw mniej. Są to podobne operacje używane w edytorach obrazów, takich jak Photoshop, Fireworks czy GIMP, które dopasowują kolory CSS do obrazów.

W poniższej tabeli przedstawiono funkcje mieszania kolorów używane w LESS.

Korzystanie z wiersza poleceń, możemy skompilować .less plik .css .

Instalowanie lessc do użytku globalnego

Następujące polecenie jest używane do zainstalowania lessc z npm (menedżerem pakietów węzłów), aby udostępnić lessc globalnie.

npm install less -g

Możesz również dodać określoną wersję po nazwie pakietu. Na przykładnpm install [email protected] -g

Instalowanie w celu tworzenia węzłów

Poniższe polecenie służy do instalowania najnowszej wersji lessc w folderze projektu.

npm i less -save-dev

Jest również dodawany do devDependencies w pliku package.json projektu.

Wydania beta programu lessc

Jest oznaczony jako beta, gdy lessc struktura jest publikowana w npmTutaj nowa funkcjonalność jest okresowo rozwijana. less -v jest używane do pobrania aktualnej wersji.

Instalowanie niepublikowanej wersji rozwojowej programu lessc

Commit - ish należy określić, kiedy przystępujemy do instalacji niepublikowanej wersji lessc i należy postępować zgodnie z instrukcjami, aby zidentyfikować adres URL git jako zależność. Zapewni to, że używasz poprawnej wersji leesc dla swojego projektu.

Wykorzystanie po stronie serwera i wiersza poleceń

bin/lessczawiera plik binarny w repozytorium. Działa z Windows, OS X i nodejs na * nix.

Wykorzystanie wiersza poleceń

Wejście jest odczytywane z stdin gdy źródło jest ustawione na myślnik lub łącznik (-).

lessc [option option = parameter ...]  [destination]

Na przykład możemy skompilować .less do .css używając następującego polecenia -

lessc stylesheet.less stylesheet.css

Możemy skompilować .less do .css przez i zminimalizuj wynik za pomocą następującego polecenia.

lessc -x stylesheet.less stylesheet.css

Opcje

Poniższa tabela zawiera listę opcji używanych w użyciu wiersza poleceń -

lessc -help
lessc -h

lessc --include-path = PATH1;PATH2

lessc -M
lessc --depends

lessc --no-color

lessc --no-ie-compat

lessc --no-js

lessc --lint
lessc -l

lessc --silent
lessc -s

lessc --strict-imports

lessc --insecure

lessc -version
lessc -v

lessc -x
lessc --compress

lessc --source-map
lessc -source-map = file.map

lessc --source-map-rootpath = dev-files/

lessc --source-map-basepath = less-files/

lessc --source-map-less-inline

lessc --source-map-map-inline

lessc --source-map-url = ../my-map.json

lessc -rp=resources/
lessc --rootpath=resources/

lessc -ru
lessc --relative-urls

lessc -sm = on
lessc --strict-math = on

lessc -su = on
lessc --strict-units = on

lessc --global-var = "background = green"

lessc --modify-var = "background = green"

lessc --url-args = "arg736357"

lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all

lessc --clean-css
lessc --plugin = clean-css = "advanced"

Less jest używany w przeglądarce, gdy chcesz dynamicznie skompilować plik Less w razie potrzeby, a nie po stronie serwera; Dzieje się tak, ponieważ less to duży plik javascript.

Na początek musimy dodać skrypt LESS, aby używać LESS w przeglądarce -

<script src = "less.js"></script>

Aby znaleźć tagi stylu na stronie, musimy dodać następujący wiersz na stronie. Tworzy także tagi stylu ze skompilowanym css.

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

Opcje ustawień

Przed znacznikiem script można programowo ustawić opcje dla obiektu less. Wpłynie to na całe programowe użycie less i początkowe tagi linków.

Na przykład możemy ustawić opcję w następujący sposób -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

Możemy również ustawić opcję w innym formacie w tagu script, jak określono poniżej -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

Możesz także dodać te opcje do znaczników łączy.

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

Punkty, które należy wziąć pod uwagę w przypadku opcji atrybutów, to -

• window.less <tag skryptu <znacznik linku to poziom ważności.

• Atrybuty danych nie mogą być zapisane w przypadku wielbłąda; opcja tagu linku jest reprezentowana jako opcje czasu.

• Atrybuty danych z wartościami niebędącymi ciągami powinny być poprawne w formacie JSON.

Tryb oglądania

Tryb obserwatora można włączyć, ustawiając opcję env na programowanie i wywołując less.watch () po dodaniu pliku less.js. Jeśli chcesz, aby tryb oglądania był tymczasowo włączony, dodaj #! Watch do adresu URL.

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

Modyfikuj zmienne

Modyfikacja zmiennej LESS w czasie rzeczywistym jest włączona. Plik LESS jest rekompilowany po wywołaniu nowej wartości. Poniższy kod przedstawia podstawowe użycie modyfikacji zmiennych -

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

Debugowanie

Możemy dodać opcję ! DumpLineNumbers: mediaquery do url lub opcję dumpLineNumbers , jak wspomniano powyżej. Opcja mediaquery może być używana z FireLESS (wyświetla oryginalną LESS nazwę pliku i numer linii mniej wygenerowanych stylów CSS).

Opcje

Przed załadowaniem pliku skryptu less.js należy ustawić opcje w globalnym obiekcie less .

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>

• async- To jest typ boolowski. Zaimportowane pliki są żądane niezależnie od tego, czy z opcją async, czy nie. Domyślnie jest to fałsz.

• dumpLineNumbers- To jest ciąg. W wyjściowym pliku css informacje o wierszu źródłowym są dodawane po ustawieniu parametru dumpLineNumbers. Pomaga w debugowaniu konkretnej reguły, z której pochodzi.

• env- To jest ciąg. Środowisko może działać na etapie rozwoju lub produkcji. Rozwój jest ustawiany automatycznie, gdy adres URL dokumentu zaczyna się odfile:// lub jest obecny na twoim lokalnym komputerze.

• errorReporting - W przypadku niepowodzenia kompilacji można ustawić metodę zgłaszania błędów.

• fileAsync- To jest typ boolowski. Gdy strona jest obecna z protokołem pliku, może zażądać, czy importować asynchronicznie, czy nie.

• functions - To jest typ obiektu.

• logLevel- To jest typ liczbowy. Wyświetla poziom logowania w konsoli javascript.

  • 2: Informacje i błędy

  • 1: Błędy

  • 0: Nic

• poll- W trybie zegarka czas między ankietami jest wyświetlany w milisekundach. Jest to typ całkowity; domyślnie jest to 1000.

• relativeUrls- Adresy URL mają być względne; domyślnie ta opcja ma wartość false. Oznacza to, że adresy URL są już względne w stosunku do pliku bez wpisu. Jest to typ boolowski.

• globalVars- Wstawia listę zmiennych globalnych do kodu. Zmienna typu string powinna być umieszczona w cudzysłowie

• modifyVars- W przeciwieństwie do opcji zmiennej globalnej. Przenosi deklarację na koniec pliku less.

• rootpath - Ustawia ścieżki na początku każdego zasobu URL.

• useFileCache- Używa pamięci podręcznej pliku sesji. Pamięć podręczna w less plików jest używana do wywoływania zmodyfikowanych zmiennych, gdzie wszystkie less plików nie zostaną ponownie pobrane.

LESS jest przyjazny dla wielu przeglądarek. Obsługuje nowoczesne przeglądarki, takie jak Google Chrome, Mozilla Firefox, Safari i Internet Explorer i umożliwia ponowne wykorzystanie elementów CSS i pisanie MNIEJ kodu z tą samą semantyką. Należy uważać na wpływ na wydajność podczas korzystania z MNIEJSZYCH po stronie klienta i podczas wyświetlania JavaScript, aby uniknąć wszelkich problemów kosmetycznych, takich jak

• Błędy w wymowie,
• Zmiany koloru,
• Texture
• Look
• Linki itp.

Skompiluj pliki LESS po stronie serwera, aby poprawić poziom wydajności witryny.

PhantomJS nie implementuje Function.prototype.bind funkcji, więc trzeba użyć ES5 podkładkę silnik JavaScript, aby funkcjonować pod PhantomJS. Użytkownicy mogą wprowadzać zmiany za pomocą zmiennych, aby wpływać na motyw i wyświetlać je w czasie rzeczywistym, używając MNIEJ po stronie klienta w produkcji.

Jeśli chcesz działać MNIEJ w starszych przeglądarkach, użyj silnika JavaScript es-5 shim , który dodaje funkcje JavaScript obsługiwane przez MNIEJ. Możesz użyć atrybutów w tagach skryptu lub linków za pomocą JSON.parse, który musi być obsługiwany przez przeglądarkę.

W tym rozdziale zrozumiemy, w jaki sposób można załadować wtyczkę, aby rozszerzyć funkcjonalność witryny. Aby ułatwić sobie pracę, można użyć wtyczek.

Wiersz poleceń

Aby zainstalować wtyczkę za pomocą wiersza poleceń, musisz najpierw zainstalować wtyczkę lessc. Wtyczkę można na początku zainstalować za pomocą less-plugin . Poniższy wiersz poleceń pomoże Ci zainstalować wtyczkę clean-css -

npm install less-plugin-clean-css

Bezpośrednio możesz użyć zainstalowanej wtyczki, używając następującego polecenia -

lessc --plugin = path_to_plugin = options

Korzystanie z wtyczki w kodzie

W Node wtyczka jest wymagana i jest przekazywana w tablicy jako opcja wtyczki do less.

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

W przeglądarce

Przed skryptem less.js autor wtyczki powinien umieścić na stronie plik javascript.

<script src = "plugin.js"></script>

<script>
less = {
   plugins: [plugin]
};
</script>

<script src = "less.min.js"></script>

Lista mniej wtyczek

Poniższa tabela zawiera listę wtyczek dostępnych w LESS.

Wtyczki postprocesora / funkcji

Importerzy ram / bibliotek

Biblioteki funkcji

Dla autorów wtyczek

MNIEJ pozwalają autorowi łączyć się z mniej.

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}

• pluginManager zapewnia uchwyt, który może dodawać menedżerów plików, postprocesorów lub gości.

• setOptions funkcja przekazuje ciąg.

• printUsage funkcja służy do wyjaśnienia opcji.

Głównym celem programowego użycia w LESS jest funkcja less.render. Ta funkcja używa następującego formatu w MNIEJ -

less.render(input_data, options)
.then(function(output) {
   //code here
},
   
function(error) {
});

funkcję można również zapisać w następujący sposób -

less.render(css, options, function(error, output) {})

W opcji jest opcjonalny argument, który zwracapromise kiedy nie określisz wywołania zwrotnego i zwrócisz plik promisekiedy określisz callback. Możesz wyświetlić plik, wczytując go w łańcuch i ustawiając pola nazwy pliku głównego.

Opcja sourceMap umożliwia ustawienie opcji mapy źródłowej , takich jak sourceMapURL , sourceMapBasepath , sourceMapRootpath , outputSourceFiles i sourceMapFileInline . Należy tutaj wziąć pod uwagę, że opcja sourceMap nie jest dostępna dla less.js.

Możesz uzyskać dostęp do dziennika, dodając odbiornik, jak pokazano w poniższym formacie -

less.logger.addListener({
   debug: function(message) {
   },
   
   info: function(message) {
   },
   
   warn: function(message) {
   },
   
   error: function(message) {
   }
});

Zdefiniowane powyżej funkcje są opcjonalne. Jeśli zostanie wyświetlony błąd, przekaże go docallback lub promiseobecny w less.render .

W tym rozdziale zrozumiemy znaczenie kompilatorów online w LESS. Kompilatory online służą do kompilowania mniejszego kodu do kodu css. Narzędzia kompilatora online z łatwością pomagają w generowaniu kodu CSS. Poniżej znajdują się dostępne online mniej kompilatorów -

• winless.org/online-less-compiler

• lesstester.com

• dopefly.com/less-converte

• lessphp.gpeasy.com/demo

• leafo.net/lessphp/editor

• estFiddle

Internetowe IDE / place zabaw z mniejszym wsparciem

Poniżej znajdują się dostępne internetowe środowiska IDE z mniejszą obsługą.

W tym rozdziale zrozumiemy GUI dla LESS . Możesz używać różnych LESS narzędzi dla swojej platformy. Aby uzyskać informacje o użyciu wiersza poleceń i narzędzi, kliknij to łącze .

W poniższej tabeli wymieniono kompilatory GUI obsługujące wiele platform.

The following table lists the GUI compilers that support Windows platform.

The following table lists the GUI compilers that supports OS X platform.

The following table lists the GUI compilers that supports OS X platform.

In this chapter, we will understand the importance of editors and plugins in LESS. An Editor is a system or program which allows a user to edit text. Plugin is a piece of software that is used to expand the functionality of the site.

Let us now discuss editors and IDEs for LESS.

Wysublimowany tekst 2 i 3

Sublime Text zapewnia różne opcje za mniej jak wymieniono w poniższej tabeli -

Zaćmienie

Eclipse ma dwie wtyczki dla LESS, zgodnie z poniższą tabelą -

Visual Studio

Program Visual Studio ma następujące różne opcje MNIEJ -

Dreamweaver

Podczas pracy z programem Dreamweaver należy wziąć pod uwagę następujące kwestie .

• Jest to aplikacja firmy Adobe używana przez projektantów i programistów do tworzenia aplikacji i witryn internetowych.

• Może działać na wielu platformach, w tym przeglądarkach, urządzeniach i tabletach.

• Projektanci stron internetowych używają programu Dreamweaver do tworzenia prototypów witryn internetowych.

• Kompilator DMXzone Less CSS udostępnia wszystkie MNIEJSZE możliwości CSS bezpośrednio w programie Dreamweaver.

Notepad ++ 6.x

Podczas pracy z Notepad ++ należy wziąć pod uwagę następujące kwestie .

• Notepad ++ to darmowy edytor tekstu i edytor kodu źródłowego, który obsługuje edycję w kartach, tj. Pracę z wieloma otwartymi plikami w jednym oknie.

• LESS dla Notepad ++ to plik xml, który zapewnia podświetlanie składni lub kolorowanie plików .less. Aby uzyskać więcej informacji, kliknij ten link .

• Aby zainstalować Notepad ++, kliknij ten link .

Kompilatory Node.js.

Poniżej znajdują się kompilatory Node.js używane dla LESS.

bez wkładu

Grunt to program uruchamiający zadania węzła. Będzie kompilować Twoje arkusze stylów za każdym razem, gdy wprowadzisz zmiany w swoich LESS plikach.

bez montażu

assemble-less to potężna wtyczka gruntowa do kompilowania MNIEJ pliku do CSS. Mniej zadań pobiera szablon JSON i Lo - dash (podkreślenie) do definiowania MNIEJ pakietów, komponentów UI, skompresowanych arkuszy stylów lub motywów.

bez łykania

Jest to MNIEJSZA wtyczka dla Gulp. gulp-minify-css służy do zmniejszania CSS. gulp-sourcemaps służy do generowania biblioteki sourcemaps.

WGŁĘBIENIE

Jest to narzędzie typu open source, które jest zbudowane na LESS i pomaga w optymalizacji kodu CSS. Dzięki temu kod CSS jest wolny od błędów, czysty i łatwy w zarządzaniu.

bez automatycznego

Jest to obserwator plików .less . Zawiera śledzenie zależności i powiadomienia międzyplatformowe.

Połącz oprogramowanie pośredniczące dla Less.js.

Służy do umożliwienia przetwarzania połączonych ram JS plików LESS. Kompiluje plik źródłowy na żądanie i buforuje skompilowane dane dla następnego żądania.

Inne technologie

Poniżej znajduje się kilka innych technologii, które pomogą Ci skompilować MNIEJ kodu.

Wro4j Runner CLI

Możesz pobrać wro4j-runner.jar i skompilować swój LESS kod w CSS za pomocą następującego polecenia -

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

Możesz odwiedzić poniższy link, aby dowiedzieć się więcej o Wro4j Runner CLI

CSS :: LESSp

Ten moduł jest używany do analizowania i kompilowania pliku LESS do pliku CSS. Poniżej znajduje się polecenie używane do kompilacji -

lessp.pl styles.less > styles.css

Możesz odwiedzić poniższy link, aby dowiedzieć się więcej o CSS :: LESSp

Host skryptu windowsowego

Poniżej znajduje się kompilator wiersza poleceń, który będzie działać w systemie Windows.

cscript //nologo lessc.wsf input.less [output.css] [-compress]

OR

lessc input.less [output.css] [-compress]

Możesz odwiedzić poniższy link, aby dowiedzieć się więcej o Less.js dla systemu Windows

bez kropki

Poniżej przedstawiono kompilator wiersza poleceń do uruchamiania bez kropek w systemie Windows.

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

Możesz odwiedzić poniższy link, aby dowiedzieć się więcej o dotless

Struktury i składniki interfejsu użytkownika / motywów

LESS obsługuje niektóre struktury UI / Theme wymienione w poniższej tabeli -

Grid Systems

LESS obsługuje struktury systemów grid, które wymieniono w poniższej tabeli -

Biblioteki Mixin

LESS zapewnia biblioteki mixin wymienione w poniższej tabeli -