Wie man schöne Sass schreibt

sauberer, schöner Code sollte in jedem Projekt ein Ziel sein. Wenn andere Entwickler eine Änderung vornehmen müssen, sollten sie in der Lage sein, zu lesen, was da ist, und es zu verstehen. Der lesbare Code ist der Kern der Wartbarkeit, und der erste Schritt in Richtung lesbarer Code ist ein guter Straftat. Wie bei einem guten Zauberer sollte der Linter alle Ihre kleinen Tippfehler und Formatierfehler fangen, sodass sie dies nicht mehr überlassen bleibt, dies zu tun. Es ist die erste Verteidigungslinie vor einer guten Code -Überprüfung mit anderen Entwicklern.

Es gibt mehrere großartige Linter für SASS: SCSS-Lint ist ein Ruby-Juwel, und der neuere Sasslint und Stylelint, die NPM-Pakete für Knoten sind. Mit beiden ermöglichen es Ihnen, Lining -Regeln für Ihr Projekt zu konfigurieren, z. B. maximale Nistniveaus, Leitung von Nullen für Dezimalstellen und Organisation von Eigenschaften in einem Block. Sie können sogar Ihre eigenen Regeln nach Bedarf erstellen.

Beobachten Sie Atoz: Sass Lernen Sie Sass Letter nach Brief Sehen Sie sich diesen Kurs an Sehen Sie sich diesen Kurs an

SASS -Richtlinien sind nützlich für die Organisation Ihres Projekts, die Einrichtung Ihrer Linter, die Festlegung von Namenskonventionen usw. Geschrieben von Hugo, ist es eine Meinung StyleGuide für Ihren Code. Möglicherweise funktioniert nicht alles für Sie, aber es ist ein großartiger Ort zum Starten.

Wenn Sie SASS -Variablen, Funktionen und Mixins verwenden, wird empfohlen, dass Sie dokumentieren, wie sie funktionieren. Toolkit -Autoren werden es besonders wichtig finden, aber jeder, der über umfangreiche Werkzeuge in ihre Projekte integriert ist, sollte auch eine Dokumentation für sein Team in Betracht ziehen. Ein weiteres großartiges Werkzeug von Hugo ist Sassdoc, ein NPM -Paket, das Ihre Sass -Kommentare analysiert und eine schöne statische Seite mit Ihrer Dokumentation generiert.

Hier ist der Sassdoc-Kommentar für unsere Tint- (..) -Funktion in der AccouTrement-Farben. Es beginnt mit einer allgemeinen Beschreibung und dokumentiert dann ausdrücklich jeden Parameter und die erwartete Rendite:

 <span>/// Mix a color with `white` to get a lighter tint.
</span><span>///
</span><span>/// @param {String | list} $color -
</span><span>///   The name of a color in your palette,
</span><span>///   with optional adjustments in the form of `(<function-name>:<args>)`.
</span><span>/// @param {Percentage} $percentage -
</span><span>///   The percentage of white to mix in.
</span><span>///   Higher percentages will result in a lighter tint.
</span><span>///
</span><span>/// @return {Color} -
</span><span>///   A calculated css-ready color-value based on your global color palette.
</span><span>@function tint(
</span>  <span>$color,
</span>  <span>$percentage
</span><span>) {
</span>  <span>/* … */
</span><span>}
</span>

Verwenden des Standardthemas (aus dem mehrere zur Auswahl stehen oder Sie Ihre eigenen entwerfen können) sassdoc wandelt diesen Kommentar in eine statische Website um, wie unten gezeigt.

Tests ist auch wichtig, wenn Sie mit Funktionen oder Mixins etwas Komplexes ausführen. Dies ist eine gute Möglichkeit, um sicherzustellen, dass Ihr Code nicht zu jeder Zeit ist, wenn Sie Anpassungen vornehmen, aber er kann auch bei der Entwicklung neuer Funktionen hilfreich sein. Wenn Sie zuerst die Tests schreiben, wissen Sie genau, ob die Funktion richtig funktioniert, wenn Ihre Tests bestehen!

true ist ein Einheitstest-Toolkit von Ihrem, das wirklich in reinem Sass geschrieben ist, so dass es überall arbeitet, wo Sass zusammengestellt wird. Die Kerntests erfolgen in Behauptungsfunktionen: Assert-Equal (..), Assert-Unnequal (..), Assert-Tue (..) und Assert-False (..). Diese werden in Tests organisiert und können in Testmodulen gruppiert werden. Hier ist ein Beispiel für echte Testen unserer Tint (..) Funktion:

 <span>/// Mix a color with `white` to get a lighter tint.
</span><span>///
</span><span>/// @param {String | list} $color -
</span><span>///   The name of a color in your palette,
</span><span>///   with optional adjustments in the form of `(<function-name>:<args>)`.
</span><span>/// @param {Percentage} $percentage -
</span><span>///   The percentage of white to mix in.
</span><span>///   Higher percentages will result in a lighter tint.
</span><span>///
</span><span>/// @return {Color} -
</span><span>///   A calculated css-ready color-value based on your global color palette.
</span><span>@function tint(
</span>  <span>$color,
</span>  <span>$percentage
</span><span>) {
</span>  <span>/* … */
</span><span>}
</span>

Wenn er kompiliert wird, gibt True CSS -Kommentare mit detaillierten Ergebnissen aus und warnt Sie in der Konsole, wenn Tests fehlschlagen:

<span>@include test-module('Tint [function]') {
</span>  <span>@include test('Adjusts the tint of a color') {
</span>    <span>@include assert-equal(
</span>      <span>tint('primary', 25%),
</span>      <span>mix(#fff, color('primary'), 25%),
</span>      <span>'Returns a color mixed with white at a given weight.');
</span>  <span>}
</span><span>}
</span>

Was bedeutet es, dass zwei Tests in diesem Beispiel „an CSS ausgeben“ wurden? Diese Tests werden nicht angezeigt, aber sie testen Mixinausgabe. Mit reinem CSS kann True nur die Ergebnisse von Funktionstests bestätigen, sodass Mixin -Tests einfach an den CSS ausgegeben werden, wo sie manuell (grob) oder mit einem CSS -Parser (besser!) Verglichen werden können. Um dies einfach zu machen, integriert sich True in JavaScript -Testläufer wie Mokka und verfügt über eine von Scott Davis geschriebene Ruby -Befehlszeilenschnittstelle. Beides analysiert den CSS -Ausgang vollständig, einschließlich des Ausgangs von Mixins, und liefert Ihnen vollständige Ergebnisse für Funktions- und Mixin -Tests:

/* # Module: Tint [function] */
/* ------------------------- */
/* Test: Adjusts the tint of a color */
/*   ✔ Returns a color mixed with white at a given weight. */

/* … */

/* # SUMMARY ---------- */
/* 16 Tests: */
/*  - 14 Passed */
/*  - 0 Failed */
/*  - 2 Output to CSS */
/* -------------------- */

häufig gestellte Fragen zum Schreiben schöner Sass

Wie kann ich SASS verwenden, um verschachtelte Regeln zu erstellen? Um verschachtelte Regeln zu erstellen, legen Sie einfach einen Selektor in einen anderen. Der innere Selektor wird dann darauf angewendet, wo er innerhalb des äußeren Selektors verschachtelt ist. Dies kann Ihren Code sauberer und einfacher zu verstehen. Zum Beispiel:

nav {
ul {
margin: 0;
Polsterung: 0; {Anzeige: Inline-Block; }

a {
Anzeige: Block;
Polsterung: 6px 12px; Vorteile der Verwendung von SASS -Variablen? Sie können Dinge wie Farben, Schriftstapel oder jeden CSS -Wert speichern, den Sie glauben, dass Sie wiederverwenden möchten. Sass verwendet das $ -Symbol, um etwas zu einer Variablen zu machen. Hier ist ein Beispiel:

$ font-stack: helvetica, sans-serif;
$ primärfarben: #333;

Körper {
Schriftart: 100% $ font- Stack;
Farbe: $ Primary-Color;
}

Wie kann ich SASS für eine bessere Code-Organisation verwenden? kann sehr nützlich für die Codeorganisation sein. Sie können teilweise Sass -Dateien erstellen, die Segmente Ihres CSS -Codes enthalten. Diese Dateien beginnen mit einem Unterstrich und können in andere Sass -Dateien importiert werden. Auf diese Weise können Sie Ihr CSS modularisieren und die Aufrechterhaltung der Dinge leichter halten.

Wie kann ich SASS verwenden, um komplexe Funktionen zu erstellen? Sie können Ihre eigenen Funktionen auch mit der @Function -Anweisung definieren. Hier ist ein Beispiel für eine einfache Funktion:

@function double ($ number) {
@return $ number * 2;
}

.box {width: double (5px ); }

Wie kann ich SASS zum Erstellen von Mixins verwenden? . Sie werden mit der @Mixin -Anweisung definiert. Hier ist ein Beispiel:

@mixin Transform ($ Eigenschaft) {

-Webkit -transform: $ Eigenschaft; >}

.box {@Include Transform (rotate (30DEG)); }

Wie kann ich SASS verwenden, um Extend/Erbe zu erstellen? Hier ist ein Beispiel:

.Message {
Rand: 1px solide #ccc;
Polsterung: 10px;
Farbe: #333;

}

.success {

@extend .message; -, *, /, Und %. Dies kann besonders nützlich sein, wenn sie mit Größen und Farben arbeiten. Hier ist ein Beispiel:

.Container {Breite: 100%; }

.Article {
float: links;
Breite: 600px / 960px * 100%; 🎜> Breite: 300px / 960px * 100%; , @each und @all. Diese können verwendet werden, um komplexe Stile mit weniger Code zu erstellen. Hier ist ein Beispiel:

@For $ i von 1 bis 3 {
.Item-#{$ i} {width: 2em * $ i; }
}

Wie kann ich SASS verwenden, um Kommentare zu erstellen?

SASS unterstützt zwei Arten von Kommentaren. Die Kommentare von / * * / Style sind in der CSS -Ausgabe erhalten, wobei die Kommentare von // Style nicht in der CSS -Ausgabe enthalten sind. Hier ist ein Beispiel:

/ * Dieser Kommentar ist
* mehrere Zeilen lang. */
Körper {Farbe: schwarz; }

// Diese Kommentare werden in der CSS -Ausgabe nicht angezeigt.
// Sie sind sehr nützlich für die Codedokumentation. }

Wie kann ich SASS verwenden, um Interpolation zu erstellen? Es geschieht mit der #{} -Syntax. Hier ist ein Beispiel:

$ name: foo;
$ attr: border; }

Das obige ist der detaillierte Inhalt vonWie man schöne Sass schreibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!