Sass-Primärgrammatik

Die verwendete Sass-Syntax ist:

sass --watch test.scss:test.css --style kompakt --style erweitert

Wie unten gezeigt:

1 Benutzerdefinierte Variable

Der Inhalt von test.scss ist:

<span style="color: #000000;">$color: black;
.test1 {
    background-color: $color;
} </span>

Der in test.css kompilierte Inhalt ist:

<span style="color: #000000;">.test1 {
  background-color: black;
}</span>

2 Variablen zur Zeichenfolge hinzufügen

Der Inhalt von test.scss ist:

<span style="color: #000000;">$left: left;
.test2 {
    border-#{$left}:1px  #000 solid;
}</span>

Der in test.css kompilierte Inhalt ist:

<span style="color: #000000;">.test2 {
  border-left: 1px  #000 solid;
}</span>

3 Addieren, subtrahieren, multiplizieren und dividieren Sie innerhalb des Musters (achten Sie auf die Schreibweise von Divisionen)

Der Inhalt von test.scss ist:

<span style="color: #000000;">$para:4;
.test3 {
    height: 5px+3px;
    width: (14px/7);
    right: $para*4;
}</span>

Der in test.css kompilierte Inhalt ist:

<span style="color: #000000;">.test3 {
  height: 8px;
  width: 2px;
  right: 16;
}</span>

Schreiben mit 4 Unterelementen

Der Inhalt von test.scss ist:

<span style="color: #000000;">.test4 {
    .lala {
        color: pink;
    }
}</span>

Der in test.css kompilierte Inhalt ist:

<span style="color: #000000;">.test4 .lala {
  color: pink;
}</span>

5 Vererbung (SASS ermöglicht einem Selektor, einen anderen Selektor zu erben)

Der Inhalt von test.scss ist:

<span style="color: #000000;">.class1 {
    border-left: 1px #000 solid;
}
.class2 {
    @extend .class1;
    font-size: 15px;
}</span>

Der in test.css kompilierte Inhalt ist:

<span style="color: #000000;">.class1, .class2 {
  border-left: 1px #000 solid;
}
.class2 {
  font-size: 15px;
}</span>

6 Codeblöcke wiederverwenden

Der Inhalt von test.scss ist: (keine Variablen)

<span style="color: #000000;">@mixin test6 {
    height: 5px;
    left: 20px;
    top: 10px;
}
.lili {
    @include test6;
}</span>

Der in test.css kompilierte Inhalt ist: (keine Variablen)

<span style="color: #000000;">.lili {
  height: 5px;
  left: 20px;
  top: 10px;
}</span>

Das Nützliche an dieser Methode ist, dass Sie Variablen wie folgt festlegen können:

Der Inhalt von test.scss ist: (mit Variablen)

<span style="color: #000000;">@mixin test62($height) {
    height: $height;
    left: 20px;
    top: 10px;
}
.lili2 {
    @include test62(100px);
}</span>

Der in test.css kompilierte Inhalt ist: (mit Variablen)

<span style="color: #000000;">.lili2 {
  height: 100px;
  left: 20px;
  top: 10px;
}</span>

7 Funktionen

Der Inhalt von test.scss ist:

<span style="color: #000000;">@function aa($color) {
    @return $color;
}
.test7 {
    color: aa(pink);
}</span>

Der in test.css kompilierte Inhalt ist:

<span style="color: #000000;">/*example 07*/
.test7 {
  color: pink;
}</span>

8 Externe SCSS- oder CSS-Dateien importieren

Der Inhalt von test.scss ist:

@import 'more.scss' 

mehr.scss-Inhalt ist:

<span style="color: #000000;">$width: 30px;
.test8 {
    width: $width;
}</span>

Der in test.css kompilierte Inhalt ist:

<span style="color: #000000;">.test8 {
  width: 30px;
}</span>