MNIEJ - Mixins

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 może być ponownie użyty w kodzie w razie potrzeby.

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

Sr.No.	Użycie i opis miksów
1	Brak wysyłania miksera Miksery mogą znikać z danych wyjściowych, po prostu umieszczając po nich nawiasy.
2	Selektory w Mixins Miksy mogą zawierać nie tylko właściwości, ale mogą również zawierać selektory.
3	Przestrzenie nazw Przestrzenie nazw służą do grupowania elementów mieszanych pod wspólną nazwą.
4	Chronione przestrzenie nazw Gdy ochrona jest stosowana do przestrzeni nazw, zdefiniowane przez nią mieszanki są używane tylko wtedy, gdy warunek ochrony zwraca wartość true.
5	Ważne słowo kluczowe! ! Ważny parametr jest używany do przesłonić szczególną właściwość.

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.