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>

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn