Was nützt „extend“ in LESS?

In LESS ist „Extend“ eine Funktion, die es uns ermöglicht, Stile von einem Selektor auf einen anderen zu vererben. Wenn wir „extend“ in einem Selektor verwenden, werden die Stile dieses Selektors mit jedem anderen Selektor zusammengeführt, der ihm entspricht.

Lassen Sie es uns anhand des folgenden Beispiels verstehen. Auf diese Weise können Sie die Verwendung der Funktion „Erweitern“ in LESS besser verstehen.

Grammatik

Benutzer können die Funktion „erweitern“ in LESS gemäß der folgenden Syntax verwenden.

.selector1:extend(.selector2) {}
//The above block does the same thing as the below
.selector1{
   &:extend(.selector2);
}

In der obigen Syntax ist „.selector1“ der Selektor, der den Stil erbt, und „.selector2“ ist der Selektor, von dem er erbt. Bei Verwendung von „extend“ können wir auch das „&“-Symbol verwenden, um verschachtelte Selektoren zu erstellen.

Verschiedene Möglichkeiten, die Funktion „Erweitern“ in Less zu verwenden

Hier sind einige verschiedene Techniken, mit denen wir die „Erweitern“-Funktion in LESS verwenden können, um unseren CSS-Code zu vereinfachen und zu optimieren:

Erweiterung am Selektor angebracht

Erweiterungen werden an Selektoren angehängt, sodass wir den Selektor, an den sie angehängt sind, mit einem anderen Selektor zusammenführen können. Es ist wie eine normale Pseudoklasse mit einem Selektorparameter.

Hier sind einige Beispiele -

• Erweitern Sie einen Selektor nach einem vorhandenen Selektor −

pre:hover:extend(div pre) {
   // styles
}

• Verwenden Sie ein Leerzeichen zwischen vorhandenem Selektor und Extend -

pre:hover :extend(div pre) {
   // styles
}

• Wir können „extend“ auch für mehrere Selektoren im selben Regelsatz verwenden, wie folgt: −

h1,
h2:extend(.title),
h3:extend(.title) {
}

Erweiterter interner Regelsatz

Wir können im Regelsatz auch „extend“ verwenden, um die Eigenschaften eines Selektors auf einen anderen Selektor zu erweitern. Zum Beispiel −

.selector1 {
   color: red;
} 
.selector2 {
   &:extend(.selector1);
   background-color: yellow;
}

Erweiterte verschachtelte Selektoren

Bei Verwendung von „erweitern“ können wir das „&“-Symbol verwenden, um verschachtelte Selektoren zu erstellen.

Im folgenden Beispiel verwenden Sie „extend“, um den verschachtelten Selektor „.selector1.nested“ auf „.selector2“ zu erweitern. Dadurch können wir die Stile von „.selector1“ und „.nested“ auf „.selector2“ erben.

.selector1 {
   color: red;  
   &.nested {
      background-color: yellow;
   }
} 
.selector2:extend(.selector1.nested) {
   font-size: 16px;
}

Exakte Übereinstimmung mit Extend

Bei der Verwendung von CSS-Erweiterungen ist es wichtig zu verstehen, dass nach einer exakten Übereinstimmung zwischen Selektoren gesucht wird. Mit anderen Worten: Selbst wenn sie dieselbe Bedeutung haben, müssen die Selektoren dieselbe Form haben, damit sie übereinstimmen.

Zum Beispiel im folgenden CSS-Code -

.first.second,
.second.first,
.second > .first { 
   color: blue; 
}
// this will NOT match any of the selectors above
.my-test:extend(.second) {} *.second { color: blue; }
// this will NOT match the *.second selector
.no-star:extend(.second) {}a:hover:visited { color: blue; }
.my-selector:extend(a:visited:hover) {}

Erweitern Sie „alle“

Wir können das Schlüsselwort all in Less als letzten Teil des Erweiterungsparameters verwenden, der Less anweist, den Selektor als Teil eines anderen Selektors abzugleichen. Dadurch wird ein neuer Selektor erstellt, der den passenden Teil des ursprünglichen Selektors enthält, und dieser durch die Erweiterung ersetzt.

Dies ist ein Beispiel −

.selector1.selector2.test,
.test.selector1.selector3 {
   color: orange;
} 
.selector2.test {
   &:hover {
      color: green;
   }
} 
.selector4:extend(.test all) {}

Beispiel 1

Im folgenden Beispiel definieren wir einen Basisstil für eine Schaltfläche mit dem Klassennamen .button und verwenden dann die Funktion „erweitern“, um bestimmte Stile zu definieren, indem wir den Basisstil erweitern, um die Stile für die Haupt- und Gefahrenschaltflächen zu definieren.

.primary-button- und .danger-button-Klassen erben alle in der .button-Klasse definierten Stile, was dazu beiträgt, Codeduplizierung zu reduzieren. Darüber hinaus fügt jede Klasse ihre eigenen benutzerdefinierten Stile hinzu, um unterschiedliche Schaltflächenstile zu erstellen.

In der Ausgabe kann der Benutzer beobachten, dass die für .button definierten Stile von .primary-button und .danger-button geerbt werden und die für jede Kategorie definierten benutzerdefinierten Stile angewendet werden.

// base style for a button
.button {
   background-color: blue;
   border: none;
   color: white;
   padding: 10px;
} 
//  specific style for a primary button by extending the base style
.primary-button:extend(.button) {
   background-color: green;
} 
//  specific style for a danger button by extending the base style
.danger-button:extend(.button) {
   background-color: red;
}

Ausgabe

.button {
   background-color: blue;
   border: none;
   color: white;
   padding: 10px;
} 
.primary-button {
   background-color: green;
} 
.danger-button {
   background-color: red;
}

Beispiel 2

Im folgenden Beispiel definieren wir einen Grundstil für eine Karte mit dem Klassennamen .card. Anschließend verwenden wir die Funktion „Erweitern“, um bestimmte Stile für große Karten, Karten mit Kopfzeilen, Karten mit Fußzeilen und Karten mit Kopf- und Fußzeilen zu definieren.

In der Ausgabe können Benutzer beobachten, dass die für .card definierten Stile von anderen Klassen geerbt werden und nach Bedarf angepasst werden können.

//style for a card
.card {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
} 
//  style for a large card by extending the base style
.large-card:extend(.card) {
   width: 500px;
} 
//style for a card with a header by extending the base style
.card-with-header:extend(.card) {
   border-top: 2px solid black;
   padding-top: 30px;
} 
// style for a card with a footer by extending the base style
.card-with-footer:extend(.card) {
   border-bottom: 2px solid black;
   padding-bottom: 30px;
} 
// style for a card with both a header and footer by extending the appropriate classes
.card-with-header-and-footer:extend(.card-with-header, .card-with-footer) {
}

Ausgabe

.card {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
} 
.large-card {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
   width: 500px;
} 
.card-with-header {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
   border-top: 2px solid black;
   padding-top: 30px;
} 
.card-with-footer {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
   border-bottom: 2px solid black;
   padding-bottom: 30px;
} 
.card-with-header-and-footer {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
   border-top: 2px solid black;
   padding-top: 30px;
   border-bottom: 2px solid black;
   padding-bottom: 30px;
}

Benutzer lernten die Syntax der Verwendung der Funktion „extend“ in LESS und verschiedene Techniken zur Verwendung von „extend“ zur Vereinfachung und Optimierung von CSS-Code. Durch die Nutzung dieser Funktion und die Verwendung von Best Practices zur Optimierung von CSS-Code können Benutzer das Schreiben von doppeltem Code für ähnliche Stile vermeiden und den CSS-Code besser organisieren.

Das obige ist der detaillierte Inhalt vonWas nützt „extend“ in LESS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!