Sass-Lernen

1. Was ist SASS?

SASS ist ein CSS-Entwicklungstool, das viele praktische Schreibmethoden bietet, was Designern viel Zeit spart und die CSS-Entwicklung einfach und wartbar macht. Dieser Artikel fasst die wichtigsten Methoden von SASS zusammen. Unser Ziel ist es, mit diesem Artikel für den alltäglichen Gebrauch die offizielle Dokumentation nicht lesen zu müssen.

2. Installation und Verwendung

2.1 Installation

SASS ist in Ruby-Sprache geschrieben, aber die Syntax der beiden hat nichts damit zu tun. Wenn Sie Ruby nicht verstehen, können Sie es trotzdem verwenden. Installieren Sie einfach zuerst Ruby und dann SASS. Vorausgesetzt, Sie haben RUby bereits installiert, geben Sie dann den folgenden Befehl in die Befehlszeile ein:

gem insrall sass

Dann können Sie es verwenden.

2.2 Verwendung

Eine SASS-Datei ist eine gewöhnliche Textdatei, in der die CSS-Syntax direkt verwendet werden kann. Der Suffixname ist .Scss, was Sassy CSS bedeutet. Mit dem folgenden Befehl kann der von der .scss-Datei in CSS konvertierte Code auf dem Bildschirm angezeigt werden. (Angenommen, der Dateiname lautet test)

sass test.scss

Wenn Sie die angezeigten Ergebnisse in einer Datei speichern möchten, geben Sie anschließend einen CSS-Dateinamen ein.

sass test.scss test.css

SASS bietet vier Programmierstiloptionen

*nested: verschachtelter eingerückter CSS-Code, was der Standardwert ist.

*expanded: Nicht eingerückter, erweiterter CSS-Code.

*kompakt: CSS-Code in einem prägnanten Format.

*komprimiert: Komprimierter CSS-Code

In einer Produktionsumgebung wird im Allgemeinen die letzte Option verwendet

sass ---style Compressed test.sass test.css

Er kann SASS auch eine bestimmte Datei oder ein bestimmtes Verzeichnis überwachen lassen und automatisch eine kompilierte Version generieren, sobald sich die Datei ändert.

//Eine Datei ansehen

sass --watch input.scss

//Ein Verzeichnis ansehen

sass --watch app/sass:public /stylesheets

Die offizielle Website von SASS bietet einen Online-Konverter, mit dem Sie die verschiedenen Beispiele unten ausführen können

3.1 Variablen

SASS erlaubt die Verwendung von Variablen, daher beginnen Variablen mit $.

$blue : #1875e7;

div{

color :$blue

}

Wenn die Variable eingebettet werden muss in einer Zeichenfolge muss es in #{} geschrieben werden.

$side : left;

.rounded{

border-#{side}-radius:5px;

}

3.2 Berechnungsfunktion

SASS ermöglicht die Verwendung von Berechnungen im Code

Body{

margin: (14px/2);

top: 50px 100px;

rechts: $var * 10%;

}

3.3 Verschachtelung

SASS ermöglicht die Verschachtelung von Selektoren. Beispielsweise kann der folgende CSS-Code

div h1{

color : red;

}

als

div geschrieben werden {

Hi{

Farbe: rot;

}

}

Attribute können auch verschachtelt werden, wie z. B. der Rand- Farbattribut, das als

p{

border:{

color:red;

}

geschrieben werden kann 🎜>

Beachten Sie, dass auf den Rand ein Doppelpunkt hinzugefügt werden muss.

Innerhalb von verschachteltem Code können Sie & verwenden, um auf übergeordnete Elemente zu verweisen. Das Attribut „Rahmenfarbe“ kann beispielsweise wie folgt geschrieben werden:

a{

&:hover{ color :#ffb3ff🎜>

}

3.4 Notizen

SASS verfügt über zwei Kommentarstile.

Standard-CSS-Kommentare /* comment */ behalten die kompilierte Datei bei.

Einzeiliger Kommentar //Kommentar, der nur in der SASS-Quelldatei erhalten bleibt und nach der Kompilierung weggelassen wird.

Fügen Sie nach /* ein Ausrufezeichen hinzu, um anzuzeigen, dass es sich um einen wichtigen Kommentar handelt. Auch wenn er im komprimierten Modus kompiliert wird, bleibt diese Kommentarzeile erhalten und kann normalerweise zur Erklärung des Urheberrechts verwendet werden Information.

/*!

Wichtige Hinweise

*/

4. Code-Wiederverwendung

4.1 Vererbung

SASS Ermöglicht einen Selektor, z. B. einen anderen Selektor, z. B. vorhandene Klasse1:

.class1{

border:1px solid #ddd;

}

To Klasse1 erben, Klasse2 muss den @extend-Befehl verwenden:

.class{

@extend.class1;

font-size :120%;

}

4.2 Mixin

Mixin ist ein bisschen wie ein C-Sprachmakro, bei dem es sich um einen wiederverwendbaren Codeblock handelt.

Verwenden Sie den Befehl @mixin, um einen Codeblock zu definieren.

@mixin left{

float:left;

margin-left:10px

}

Verwenden Sie den Befehl @include, um call Die Stärke dieses Mixins

div{

@include left;

}

Mixin besteht darin, dass Sie Parameter und Standardwerte angeben können.

@mimin left($value:10px){

float:left;

Margin-right:$value

}

Fügen Sie bei Verwendung nach Bedarf Parameter hinzu

div{

@include left(20px);

}

Das Folgende ist ein Beispiel für ein Mixin , Wird zum Generieren von Browser-Präfixen verwendet.

@mixin abgerundet($vert,$horz,$radius:10px){

border-#{$vert}-#{$horz}-radius:$radius;

-moz-border-radius-#{$vert}#{$horz}:$radius;

-webkit-border-#{$vert}-#{$horz}-radius:$ radius;

}

Wenn Sie es verwenden, können Sie es wie folgt aufrufen

#navbar li{ @includerounded(top,left);}

#footer{ @includerounded(top,left,5px);}

4.3 Farbfunktionen

SASS bietet einige integrierte Funktionen zum Generieren einer Reihe von Farben.

Aufhellen(#cc3,10%)//#d6d65c

Abdunkeln(#cc3,10%)//#a3a329

Graustufen(#cc3)//# 808080

complement(#cc3)//#33c

4.4 Datei einfügen

@import-Befehl, der zum Einfügen externer Dateien verwendet wird.

@import „path/filename.scss“;

Wenn eine .css-Datei eingefügt wird, entspricht dies dem CSS-Importbefehl.

@import „foo.css“;

5. Erweiterte Verwendung

5.1 Bedingungsanweisung

@if kann zur Beurteilung von

p{

@if 1 1 == verwendet werden 2 {border:1px solid;}

@if 5< 3{border:2px dotted;}

Der passende @else-Befehl:

@if lightness($color)>30%{

}@else{

}

5.2 Schleife Anweisung

SASS unterstützt for-Schleife:

@for $i von 1 bis 10 {

.border-#{$i}{

Border : #{$i}px einfarbig blau;

}

}

unterstützt auch while-Schleife:

$i:6;

@while $i >0{

.item-#{$i}{width:2em *$i}

$i:$i-2

}

jeder Befehl ähnelt for:

@each $member in a,b,c,d{

.#{$member}{

Hintergrundbild:url(“image/#{$member}.jpg”);

}

}

5.3 Benutzerdefinierte Funktion

Mit SASS können Benutzer ihre eigenen Funktionen schreiben.

@function double($n){

@return $n*2;

}

#sidebar{

Breite :double(5px);

}