MNIEJ - Rozszerz

Extend to LESS pseudoklasa, która rozszerza inne style selektorów w jednym selektorze przy użyciu :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 -

Sr.No. Rodzaje i opis
1 Przedłużenie dołączone do selektora

Extend jest połączony z selektorem, który wygląda podobnie do pseudoklasy z selektorem jako parametrem.

2 Rozszerz wewnątrz zestawu reguł

Plik &:extend(selector) składnię można umieścić w treści zestawu reguł.

3 Rozszerzanie zagnieżdżonych selektorów

Zagnieżdżone selektory są dopasowywane za pomocą selektora rozszerzania .

4 Dokładne dopasowanie z rozszerzeniem

Domyślnie, extend szuka dokładnego dopasowania między selektorami.

5 n-te wyrażenie

Forma n-tego wyrażenia jest ważna w rozszerzeniu, w przeciwnym razie traktuje selektor jako inny.

6 Rozszerz „wszystko”

Kiedy słowo kluczowe all zostanie w końcu zidentyfikowane wextend argument, to LESS dopasowuje ten selektor jako część innego selektora.

7 Selector Interpolation with Extend

Plik extend można podłączyć do selektora interpolowanego.

8 Określanie zakresu / rozszerzanie wewnątrz @media

Rozszerz dopasowuje tylko ten selektor, który jest obecny w tej samej deklaracji nośnika.

9 Wykrywanie duplikatów

Nie może wykryć powielania selektorów.

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

Sr.No. Rodzaje i opis
1 Klasyczny przypadek użycia

Klasyczny przypadek użycia służy do uniknięcia dodawania klasy bazowej w LESS.

2 Zmniejszanie rozmiaru CSS

Rozszerz służy do przesuwania selektora tak daleko, jak właściwości, których chcesz użyć; pomaga to w redukcji kodu generowanego przez CSS.

3 Łączenie stylów / bardziej zaawansowane miksowanie

Korzystając z rozszerzenia, możemy połączyć te same style poszczególnych selektorów w inny selektor.