[RUBY] SCSS Notation Spickzettel

Über diesen Inhalt

Dieser Inhalt wird auf der Website veröffentlicht, die ich zur einfacheren Anzeige betreibe. Verwenden Sie ihn daher auch. [Sass] SCSS-Notations-Spickzettel

Was ist die SCSS-Notation?

Die SCSS-Notation ist einer der Schreibstile von Sass. Sass hat die SCSS-Notation und die SASS-Notation, und die SCSS-Notation wird häufig verwendet, da sie mit CSS kompatibel ist. Die Erweiterung sollte ".scss" sein.

Was ist Sass?

Abkürzung für "Syntactically Awesome Style Sheet", eine CSS-Metasprache von Ruby, die so konzipiert und entwickelt wurde, dass CSS effizient geschrieben werden kann.

Grundlegendes Schreiben

SCSS

div{
  p{
    color: red;
  }
}

Verschachteltes Struktursystem

Verschachtelte Struktur

Beschrieben in einer verschachtelten Struktur (wie HTML)

See the Pen Sass_scss_nest by engineerhikaru (@engineerhikaru) on CodePen.

Siehe übergeordnete Auswahl

Beschreiben Sie anhand des Namens des übergeordneten Selektors

See the Pen Sass_scss_parent-reference by engineerhikaru (@engineerhikaru) on CodePen.

Verschachtelung von Namespaces

Beschreiben Sie, was im Namespace in CSS (Schriftfamilie usw.) in einer verschachtelten Struktur beschrieben wird

See the Pen Sass_scss_namespace-nest by engineerhikaru (@engineerhikaru) on CodePen.

Variables System

Variable

Gruppieren Sie häufig verwendete Werte in Variablen

See the Pen Sass_scss_variable by engineerhikaru (@engineerhikaru) on CodePen.

Array-Variable

Sammeln Sie häufig verwendete Werte mit Array-Variablen

See the Pen Sass_scss_array-variable by engineerhikaru (@engineerhikaru) on CodePen.

Gruppenvariablen

Fassen Sie häufig verwendete Stile zusammen

See the Pen Sass_scss_group-variable by engineerhikaru (@engineerhikaru) on CodePen.

Vererbungssystem

importieren

Importieren Sie die geteilte SCSS-Datei

SCSS

// basic.Beim Lesen einer SCSS-Datei namens scss
@import "basic";

Erbe

Erben Sie den anderswo verwendeten Stil

See the Pen Sass_scss_extend by engineerhikaru (@engineerhikaru) on CodePen.

Grammatik

Bedingte Verzweigung

Ändern Sie den Stil abhängig von den Bedingungen

See the Pen Sass_scss_if-else by engineerhikaru (@engineerhikaru) on CodePen.

Wiederholung

Stil wiederholen

See the Pen Sass_scss_for by engineerhikaru (@engineerhikaru) on CodePen.

Wiederholen (Array-Variable)

Wiederholen Sie dies mit Array-Variablen

See the Pen Sass_scss_foreach by engineerhikaru (@engineerhikaru) on CodePen.

Berechnung / Farbe

Vier Regeln

Rechnen Sie mit Stil

See the Pen Sass_scss_calculation by engineerhikaru (@engineerhikaru) on CodePen.

String-Verkettung

String-Verkettung mit Stil

See the Pen Sass_scss_concatenation by engineerhikaru (@engineerhikaru) on CodePen.

Helligkeitsanpassung

Passen Sie die Helligkeit der Grundfarbe an

See the Pen Sass_scss_brightness by engineerhikaru (@engineerhikaru) on CodePen.

Sättigungseinstellung

Passen Sie die Grundfarbsättigung an

See the Pen vYNVVjr by engineerhikaru (@engineerhikaru) on CodePen.

Transparenzanpassung

Passen Sie die Transparenz der Grundfarbe an

See the Pen Sass_scss_transparency by engineerhikaru (@engineerhikaru) on CodePen.

Farbtoneinstellung

Passen Sie den Farbton der Grundfarbe an

See the Pen Sass_scss_hue by engineerhikaru (@engineerhikaru) on CodePen.

Komplementärfarbe & Farbumkehr

Ergänzen oder invertieren Sie die Grundfarbe

See the Pen Sass_scss_inversion by engineerhikaru (@engineerhikaru) on CodePen.

Farben mischen

Mischen Sie die Grundfarben (2)

See the Pen Sass_scss_color-mix by engineerhikaru (@engineerhikaru) on CodePen.

Andere

Auskommentieren

SCSS

//1-zeiliger Kommentar
/* 
Mehrzeiliger Kommentar(Bleibt nach der Kompilierung)
*/

Nicht zitieren

Entfernen Sie das Anführungszeichen ("") aus der Zeichenfolge

See the Pen Sass_scss_quote by engineerhikaru (@engineerhikaru) on CodePen.

Groß- / Kleinschreibung

Groß- oder Kleinschreibung der Zeichenkette

See the Pen Sass_scss_upper-case by engineerhikaru (@engineerhikaru) on CodePen.

Gibt den absoluten Wert zurück

Gibt den absoluten Wert einer Zahl zurück

See the Pen Sass_scss_abs by engineerhikaru (@engineerhikaru) on CodePen.

Zurück rund

Gibt eine Aufrundung von Zahlen zurück

See the Pen Sass_scss_ceil by engineerhikaru (@engineerhikaru) on CodePen.

Kürzung zurückgeben

Gibt das Abschneiden von Zahlen zurück

See the Pen Sass_scss_floor by engineerhikaru (@engineerhikaru) on CodePen.

Gibt die Rundung zurück

Gibt die Rundung von Zahlen zurück

See the Pen Sass_scss_round by engineerhikaru (@engineerhikaru) on CodePen.

Über diesen Inhalt

Dieser Inhalt wird auf der Website veröffentlicht, die ich zur einfacheren Anzeige betreibe. Verwenden Sie ihn daher auch. [Sass] SCSS-Notations-Spickzettel