A quoi sert extend dans LESS ?

Dans LESS, "Extend" est une fonctionnalité qui nous permet d'hériter des styles d'un sélecteur à un autre. Lorsque nous utilisons « étendre » dans un sélecteur, il fusionne les styles de ce sélecteur avec tout autre sélecteur qui lui correspond.

Comprenons-le à travers l'exemple suivant. De cette façon, vous pouvez comprendre plus clairement l'utilisation de la fonctionnalité « étendre » dans LESS.

Grammaire

Les utilisateurs peuvent utiliser la fonction "étendre" dans LESS selon la syntaxe suivante.

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

Dans la syntaxe ci-dessus, ".selector1" est le sélecteur qui héritera du style, et ".selector2" est le sélecteur dont il héritera. Lorsque vous utilisez « étendre », nous pouvons également utiliser le symbole « & » pour créer des sélecteurs imbriqués.

Différentes façons d'utiliser la fonctionnalité "Extender" dans Less

Voici différentes techniques que nous pouvons utiliser la fonctionnalité « étendre » dans LESS pour simplifier et optimiser notre code CSS :

Extension attachée au sélecteur

Des extensions sont attachées aux sélecteurs, nous permettant de fusionner le sélecteur auquel il est attaché avec un autre sélecteur. C'est comme une pseudo-classe normale avec un paramètre sélecteur.

Voici quelques exemples -

• Développez un sélecteur après un sélecteur existant −

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

• Utilisez un espace entre le sélecteur existant et étendez-

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

• Nous pouvons également utiliser extend sur plusieurs sélecteurs dans le même ensemble de règles, comme ceci −

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

Règles internes étendues

Nous pouvons également utiliser "extend" dans l'ensemble de règles pour étendre les propriétés d'un sélecteur à un autre sélecteur. Par exemple −

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

Sélecteurs imbriqués étendus

Lors de l'utilisation de "étendre", nous pouvons utiliser le symbole "&" pour créer des sélecteurs imbriqués.

Dans l'exemple ci-dessous, utilisez "extend" pour étendre le sélecteur imbriqué ".selector1.nested" à ".selector2". Cela nous permet d'hériter des styles de ".selector1" et ".nested" sur ".selector2".

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

Correspondance exacte avec Extend

Lorsque vous utilisez des extensions CSS, il est important de comprendre qu'elles recherchent une correspondance exacte entre les sélecteurs. En d’autres termes, même s’ils ont la même signification, les sélecteurs doivent avoir la même forme pour correspondre.

Par exemple, dans le code CSS suivant -

.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) {}

Développez « tout »

Nous pouvons utiliser le mot-clé all dans Less comme dernière partie du paramètre d'extension, qui indique à Less de faire correspondre le sélecteur dans le cadre d'un autre sélecteur. Cela créera un nouveau sélecteur contenant la partie correspondante du sélecteur d'origine et le remplacera par l'extension.

Ceci est un exemple −

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

Exemple 1

Dans l'exemple ci-dessous, nous définissons un style de base pour un bouton avec le nom de classe .button, puis utilisons la fonction "extend" pour définir des styles spécifiques en étendant le style de base pour définir les styles des boutons principaux et de danger.

.primary-button et .danger-button héritent de tous les styles définis dans la classe .button, ce qui permet de réduire la duplication de code. De plus, chaque classe ajoute ses propres styles personnalisés pour créer différents styles de boutons.

Dans le résultat, l'utilisateur peut observer que les styles définis pour .button sont hérités par .primary-button et .danger-button, et que les styles personnalisés définis pour chaque catégorie sont appliqués.

// 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;
}

Sortie

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

Exemple 2

Dans l'exemple ci-dessous, nous définissons un style de base pour une carte avec le nom de classe .card. Nous utilisons ensuite la fonction « étendre » pour définir des styles spécifiques pour les grandes cartes, les cartes avec en-têtes, les cartes avec pieds de page et les cartes avec à la fois des en-têtes et des pieds de page.

Dans le résultat, l'utilisateur peut observer que les styles définis pour .card sont hérités par d'autres classes et personnalisés selon ses besoins.

//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) {
}

Sortie

.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;
}

Les utilisateurs ont appris la syntaxe d'utilisation de la fonction "extend" dans LESS et diverses techniques d'utilisation de "extend" pour simplifier et optimiser le code CSS. En tirant parti de cette fonctionnalité et en utilisant les meilleures pratiques pour optimiser le code CSS, les utilisateurs peuvent éviter d'écrire du code en double pour des styles similaires et garder le code CSS plus organisé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!