WENIGER - verlängern

Extend ist eine WENIGER Pseudoklasse, die mithilfe von andere Selektorstile in einem Selektor erweitert :extend Wähler.

Beispiel

Das folgende Beispiel zeigt die Verwendung von " Erweitern" in der WENIGER Datei -

verlängern_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>

Erstellen Sie als Nächstes die Datei style.less .

style.less

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

.style {
   background: green;
}

Sie können die kompilieren extend.less Datei zu extend.css mithilfe des folgenden Befehls -

lessc style.less style.css

Führen Sie den obigen Befehl aus. es wird die erstellen style.css Datei automatisch mit dem folgenden Code -

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

Ausgabe

Befolgen Sie diese Schritte, um zu sehen, wie der obige Code funktioniert -

Speichern Sie den obigen HTML-Code in der extend_syntax.htm Datei.
Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Syntax erweitern

Extend wird in einen Regelsatz eingefügt oder an einen Selektor angehängt. Es ähnelt einer Pseudoklasse, die eine oder mehrere Klassen enthält, die durch Komma getrennt sind. Verwenden des optionalen Schlüsselwortsallkann jedem Selektor gefolgt werden.

Beispiel

Das folgende Beispiel zeigt die Verwendung der Extend-Syntax in der LESS-Datei.

verlängern_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>

Erstellen Sie nun die Datei style.less .

style.less

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

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

Sie können die Datei style.less mit dem folgenden Befehl in style.css kompilieren :

lessc style.less style.css

Führen Sie den obigen Befehl aus. es wird die erstellen style.css Datei automatisch mit dem folgenden Code -

style.css

.style {
   background: #BF70A5;
}

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

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

Ausgabe

Befolgen Sie diese Schritte, um zu sehen, wie der obige Code funktioniert -

Speichern Sie den obigen HTML-Code in der extend_syntax.htm Datei.
Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

In der folgenden Tabelle sind alle Arten der Erweiterungssyntax aufgeführt, die Sie in WENIGER verwenden können.

Sr.Nr.	Typen & Beschreibung
1	Erweitern Sie Attached to Selector Extend ist mit einem Selektor verbunden, der einer Pseudoklasse mit Selektor als Parameter ähnelt.
2	Innerhalb des Regelsatzes erweitern Das &:extend(selector) Die Syntax kann in den Regelsatz eingefügt werden.
3	Verschachtelte Selektoren erweitern Verschachtelte Selektoren werden mit dem Erweiterungsselektor abgeglichen .
4	Genaue Übereinstimmung mit Extend Standardmäßig, extend sucht nach der genauen Übereinstimmung zwischen den Selektoren.
5	n-ter Ausdruck Die Form des n-ten Ausdrucks ist insofern wichtig, als sie den Selektor als unterschiedlich behandelt.
6	Erweitern Sie "alle" Wenn das Schlüsselwort alle endlich in der identifiziert wirdextend Argument dann WENIGER entspricht diesem Selektor als Teil eines anderen Selektors.
7	Selektorinterpolation mit Erweitern Das extend kann an den interpolierten Selektor angeschlossen werden.
8	Scoping / Erweitern in @media Erweitern entspricht nur dem Selektor, der in derselben Mediendeklaration vorhanden ist.
9	Duplizierungserkennung Es kann keine Duplizierung von Selektoren erkennen.

Im Folgenden sind die Arten von Anwendungsfällen für die Erweiterung aufgeführt

Sr.Nr.	Typen & Beschreibung
1	Klassischer Anwendungsfall Der klassische Anwendungsfall wird verwendet, um das Hinzufügen der Basisklasse in WENIGER zu vermeiden.
2	CSS-Größe reduzieren Mit Erweitern wird der Selektor bis zu den Eigenschaften verschoben, die Sie verwenden möchten. Dies hilft bei der Reduzierung des CSS-generierten Codes.
3	Kombinieren von Stilen / Ein fortgeschritteneres Mixin Mit Extend können wir die gleichen Stile eines bestimmten Selektors in einem anderen Selektor kombinieren.