Vererben Sie eine Klasse in eine andere Datei in Sass

SASS ist ein auf CSS basierender Präprozessor zur besseren Manipulation von CSS-Code. Es enthält mehrere Anweisungen und Regeln, die das Schreiben von CSS-Code erleichtern. Es enthält auch einige sehr nützliche Funktionen wie Vererbung, if/else-Anweisungen, Funktionen usw.

In SASS können wir eine Datei in eine andere importieren und den Inhalt einer Datei in einer anderen verwenden. Es ermöglicht uns auch, eine Vererbung zwischen mehreren Klassen zu erstellen. Mit der @extend-Direktive können wir eine Klasse an eine andere Klasse erben. Durch die Verwendung der Vererbung in CSS können wir die Wiederverwendbarkeit unseres Codes verbessern.

In diesem Tutorial erfahren Sie, wie Sie eine Klasse von einer anderen Datei in SASS erben.

Grammatik

Benutzer können der folgenden Syntax folgen, um eine Klasse in eine andere Datei in SASS zu erben.

@import "filename";

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

Wir haben die @import-Regel in der obigen Syntax zum Importieren von Dateien verwendet. Danach erweitern wir die Klasse „element“ mit der Klasse „classname“ mithilfe der @extend-Direktive.

Beispiel 1 (Basisklassenvererbung)

Im folgenden Beispiel demonstrieren wir die grundlegende Klassenvererbung. Hier haben wir in der Datei „card.scss“ eine „Card“-Klasse mit einigen CSS-Eigenschaften hinzugefügt. Wir können sagen, dass es alle grundlegenden CSS-Eigenschaften und -Werte enthält, die wir zum Erstellen von Karten benötigen.

In der style.scss-Datei verwenden wir die @import-Direktive, um die card.scss-Datei zu importieren. Danach haben wir die Klassen „card-div“ und „card-container“ gestaltet. Gleichzeitig haben wir die @extend-Regel verwendet, um die Klassen „card-div“ und „card-container“ in die Klasse „card“ zu erben.

In der Ausgabe können wir das Ergebnis der geerbten Klasse beobachten. Darüber hinaus können Benutzer im folgenden Beispiel die Wiederverwendbarkeit von Code beobachten.

Dateiname – 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);
}

Dateiname – style.scss

@import "card";

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

Ausgabe

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

Beispiel 2 (Erben mehrerer Klassen)

Im folgenden Beispiel demonstrieren wir die Vererbung mehrerer Klassen. Wir haben der Datei „specs.scss“ verschiedene Klassen hinzugefügt, die CSS-Eigenschaften enthalten. In der Datei style.scss haben wir die Datei „specs.scss“ importiert. Darüber hinaus haben wir alle drei Klassen der Datei „specs.scss“ mithilfe der @extend-Direktive in „div“-Klassen erweitert. Wir haben also mehrere Klassen aus einer anderen Datei in eine Klasse geerbt.

Dateiname – specs.scss

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

Dateiname – style.scss

@import "specs";

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

Ausgabe

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

Beispiel 3 (verschachtelte Vererbung)

Im folgenden Beispiel demonstrieren wir die verschachtelte Vererbung. In der Datei form.scss haben wir zwei verschiedene Klassen erstellt und CSS-Eigenschaften hinzugefügt.

In der Datei style.scss haben wir die Klasse „form-group“ über die Klasse „form-field“ geerbt und die Klasse „form-input“ hinzugefügt. Die Klasse „Eingabefeld“ erbt die Klasse „Formulareingabe“. Deshalb haben wir verschachtelte geerbte Klassen verwendet.

Dateiname – form.scss

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

Dateiname – style.scss

@import 'fonts';

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

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

Ausgabe

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

Der Benutzer hat gelernt, in SASS Klassen von einer Datei in eine andere zu vererben. Benutzer müssen die Datei importieren, die die Klasse enthält, und den Klassennamen der @extend-Anweisung verwenden, um von einer Klasse auf eine andere zu erben.

Das obige ist der detaillierte Inhalt vonVererben Sie eine Klasse in eine andere Datei in Sass. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!