MNIEJ - osłony Mixin

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 przecinkami; strażnik musi być ujęty w nawiasach. LESS używa chronionych miksów zamiastif/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.

Sr.No.	Rodzaje i opis
1	Operatory porównania strażników Możesz użyć operatora porównania (=), aby porównać liczby, ciągi znaków, identyfikatory itp.
2	Chroń operatorów logicznych Możesz użyć słowa kluczowego i, aby obejść operatory logiczne z osłonami.
3	Funkcje sprawdzania typów Zawiera wbudowane funkcje do określania typów wartości dla dopasowanych miksów.
4	Warunkowe mieszanki LESS używa domyślnej funkcji do dopasowania miksu do innych dopasowań.

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.