Wie man Regeln und Eigenschaften in Sass nistet?

SASS-Akronym für syntaktisch fantastische Stylesheet ist ein Vorprozessor und eine Erweiterung von CSS, die gut mit allen Versionen von CSS funktioniert. Es ist bekannt für seine saubere und gut strukturierte Syntax, die infolgedessen die Fähigkeit der Grundsprache verbessert. SASS erleichtert seine Benutzer, indem er die Verwendung von Variablen, Verschachteln, Mixins, Vererbung usw. unterstützt. Das in diesem Artikel diskutierte Thema ist in Sass nisten. Hier werden wir zeigen, wie Sie Regeln und Eigenschaften in SASS nisten können.

Wie man Regeln in Sass nistet

Die Verachtung gilt als das Verfahren der Kombination verschiedener Regeln. Mit SASS können seine Benutzer Regeln nisten, verhindern, dass die äußeren Selektoren immer wieder schreiben, wodurch der Code klar und lesbarer wird als grundlegende CSS.

Beispiel
Das nachstehende Beispiel zeigt, wie die Nistung in Sass erfolgt.

Html

• Heim
>

• Dienstleistungen


• Über uns


• Kontaktiere uns

Im obigen Code erstellen wir eine Seitenleiste, indem wir einen Div -Container erstellen und eine ungeordnete Liste darin nisten. Darüber hinaus haben wir auch den Link der CSS.

Sass

div
float: links;
Breite: 25%;
Hintergrundfarbe: Rosybrown;
Polsterung: 25px 15px;
ul
Typ-Typ-Typ: Keine;
Rand: 0;
Polsterung: 0;

li
Polsterung: 8px;
Randboden: 15px;
Hintergrundfarbe: Plum;
Farbe weiß;

Jetzt werden Sie feststellen. Der gleiche Code oben in Standard -CSS würde jedoch ungefähr so ​​aussehen.

CSS

div
float: links;
Breite: 25%;
Hintergrundfarbe: Rosybrown;
Polsterung: 25px 15px;

Div ul
Typ-Typ-Typ: Keine;
Rand: 0;
Polsterung: 0;

div li
Polsterung: 8px;
Randboden: 15px;
Hintergrundfarbe: Plum;
Farbe weiß;

Im obigen Code werden Sie feststellen, dass wir den Div -Selektor mit jedem anderen Selektor verwenden müssen, um unsere verschiedenen Elemente zu stylen. In CSS können Sie die Selektoren/Regeln ineinander nicht nisten.

Dies ist der Vorteil, den Sass über CSS hat, dass es seine Benutzer daran hindert, redundante Selektoren zu wiederholen, was den Code klar und lesbarer macht. Die Ausgabe des obigen Beispiels ist unten gezeigt.

Ausgang

Eine Seitenleiste wurde erzeugt und mit Nesting in Sass gestylt.

Wie man Eigenschaften in Sass nistet

Ein weiterer Vorteil von SASS ist, dass es auch die Verhinderung von Eigenschaften ermöglicht. Sie müssen festgestellt haben, dass das Präfix verschiedener CSS-Eigenschaften dieselbe ist wie Schriftgrößen, Schriftfamilie, Schriftgewicht usw. usw. Die Präfix -Schriftart ist in diesen Eigenschaften gleich.

Um dieses Präfix in Ihrem Stylesheet immer wieder zu vermeiden, können Sie diese Eigenschaften in SASS nisten. Sie müssen sich fragen, wie es geht. Wenden Sie sich an das folgende Beispiel.

Beispiel
Dieses Beispiel zeigt, wie Eigenschaften in SASS nistet.

Html

Dies ist ein Absatz.

Im obigen Code haben wir einfach einen Absatz erstellt.

Sass

Körper
Hintergrund:

Farbe Pink;
Anhang: behoben;


P
Schriftart:

Familie: Verdana;
Größe: 20px;
Gewicht: fett;

Jetzt werden Sie in dem obigen Code bemerken, dass wir beim Stylen unserer Elemente mit verschiedenen CSS -Eigenschaften das Präfix einmal geschrieben und dann die Eigenschaften im Zusammenhang mit diesem Präfix im Selektor verschachtelt haben. Auf diese Weise haben wir es vermieden, das gleiche Präfix immer wieder zu schreiben.

CSS

Dies ist der transpilierte CSS -Ausgang.

Ausgang

Elemente wurden erfolgreich mit dem Nestieren in SASS gestylt.

Abschluss

Zum Zwecke der Verschachtung von Regeln in SASS müssen Sie nur einmal den äußeren Selektor schreiben und den Rest der Selektoren darin nisten. In der Zwischenzeit können Sie die Eigenschaften in SASS in SASS nisten, das Präfix der Eigenschaften einmal zu schreiben und die damit verbundenen Eigenschaften darin zu nisten. Verschachtelungsregeln und Eigenschaften in Sass hindert Sie daran, redundante CSS -Werte wiederholt zu schreiben, wodurch Ihr Code klar und lesbarer wird. Dieser Artikel leitet Sie, wie Sie Regeln und Eigenschaften in SASS nisten können.