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.