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