Hériter d'une classe dans un autre fichier dans Sass

SASS est un préprocesseur construit sur CSS pour mieux manipuler le code CSS. Il contient plusieurs directives et règles qui facilitent l'écriture de code CSS. Il contient également des fonctionnalités très utiles telles que l'héritage, les instructions if/else, les fonctions, etc.

Dans SASS, nous pouvons importer un fichier dans un autre et utiliser le contenu d'un fichier dans un autre. Cela nous permet également de créer un héritage entre plusieurs classes. Nous pouvons hériter d’une classe vers une autre classe en utilisant la directive @extend. En utilisant l'héritage en CSS, nous pouvons améliorer la réutilisabilité de notre code.

Dans ce tutoriel, nous apprendrons comment hériter d'une classe d'un autre fichier dans SASS.

Grammaire

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour hériter d'une classe dans un autre fichier dans SASS.

@import "filename";

.element {
   @extend .classname;
   // other css
}

Nous avons utilisé la règle @import dans la syntaxe ci-dessus pour importer des fichiers. Après cela, nous étendons la classe "element" avec la classe "classname" en utilisant la directive @extend.

Exemple 1 (héritage de classe de base)

Dans l'exemple ci-dessous, nous démontrons l'héritage de classe de base. Ici, dans le fichier card.scss, nous avons ajouté une classe 'card' avec quelques propriétés CSS. On peut dire qu'il contient toutes les propriétés et valeurs CSS de base dont nous avons besoin pour créer des cartes.

Dans le fichier style.scss, nous utilisons la directive @import pour importer le fichier card.scss. Après cela, nous avons stylisé les classes « card-div » et « card-container ». Dans le même temps, nous avons utilisé la règle @extend pour hériter des classes 'card-div' et 'card-container' dans la classe 'card'.

Dans la sortie, nous pouvons observer le résultat de la classe héritée. De plus, les utilisateurs peuvent observer la réutilisabilité du code dans l'exemple ci-dessous.

Nom du fichier - card.scss

.card {
   background-color: aliceblue;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 10px;
   margin: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Nom du fichier – style.scss

@import "card";

.card-container {
   @extend .card;
   width: 300px;
   height: 300px;
}
.card-div {
   @extend .card;
   width: 200px;
   height: 200px;
}

Sortie

.card,
.card-container,
.card-div {
   background-color: aliceblue;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 10px;
   margin: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.card-container {
   width: 300px;
   height: 300px;
}

.card-div {
   width: 200px;
   height: 200px;
}

Exemple 2 (Héritage de plusieurs classes)

Dans l'exemple ci-dessous, nous démontrons l'héritage de plusieurs classes. Nous avons ajouté différentes classes contenant des propriétés CSS dans le fichier « specs.scss ». Dans le fichier style.scss, nous avons importé le fichier "specs.scss". De plus, nous avons étendu les 3 classes du fichier "specs.scss" en classes "div" à l'aide de la directive @extend. Nous avons donc hérité de plusieurs classes dans une classe à partir d'un autre fichier.

Nom du fichier - specs.scss

.margin {
   margin-top: 10px;
   margin-left: 10px;
}
.padding {
   padding-top: 10px;
   padding-left: 10px;
}
.size {
   font-size: 20px;
}

Nom du fichier – style.scss

@import "specs";

.div {
   @extend .margin;
   @extend .padding;
   @extend .size;
   width: 300px;
   height: 300px;
   border: 2px dotted blue;
   border-radius: 12px;
}

Sortie

.margin,
.div {
   margin-top: 10px;
   margin-left: 10px;
}
.padding,
.div {
   padding-top: 10px;
   padding-left: 10px;
}
.size,
.div {
   font-size: 20px;
}
.div {
   width: 300px;
   height: 300px;
   border: 2px dotted blue;
   border-radius: 12px;
}

Exemple 3 (héritage imbriqué)

Dans l'exemple ci-dessous, nous démontrons l'héritage imbriqué. Dans le fichier form.scss, nous avons créé deux classes différentes et ajouté des propriétés CSS.

Dans le fichier style.scss, nous avons hérité de la classe 'form-group' via la classe 'form-field' et avons ajouté la classe 'form-input'. La classe 'input-field' hérite de la classe 'form-input'. Nous avons donc utilisé des classes héritées imbriquées.

Nom du fichier - form.scss

// form.scss
.form-field {
   margin-bottom: 20px;
}
input-field {
   border: 1px solid #cccccc;
   padding: 5px;
}

Nom du fichier – style.scss

@import 'fonts';

.form-group {
   @extend .form-field;

   .form-input {
      @extend .input-field;
   }
}

Sortie

.form-field,
.form-group {
   margin-bottom: 20px;
}
.input-field,
.form-group .form-input {
   border: 1px solid #cccccc;
   padding: 5px;
}

L'utilisateur a appris à hériter des classes d'un fichier à un autre dans SASS. Les utilisateurs doivent importer le fichier contenant la classe et utiliser le nom de classe de la directive @extend pour hériter d'une classe à une autre.

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!