Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Sass und SCSS sind zwei Syntaxen von Sass (Syntactically Awesome Stylesheets). Beide werden verwendet, um strukturierteres und wartbareres CSS zu schreiben. Hier sind ihre wichtigsten Vergleiche in Syntax und Funktionen:

1. Grammatikformat

Sass (Einrückungssyntax)

• keine geschweiften Klammern {} und Semikolon;。
• Verwenden Sie Einrückungen, um Verschachtelungen und hierarchische Beziehungen anzuzeigen.

nav
  ul
    margin: 0
    padding: 0
  li
    display: inline-block
    margin-right: 5px
1
2
3
4
5
6
7

SCSS (freches CSS)

• Ähnlich wie Standard-CSS, mit geschweiften Klammern {} und Semikolon;。
• Kompatibel mit allen vorhandenen CSS-Codes.

nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    margin-right: 5px;
  }
}
1
2
3
4
5
6
7
8
9
10

2. Variablen

Beide unterstützen Variablen und haben die gleiche Syntax:

$primary-color: #333;

nav {
  color: $primary-color;
}
1
2
3
4
5

3. Verschachtelung

Beide unterstützen die Verschachtelung, aber in Sass verwendet die Verschachtelung Einrückungen, während in SCSS geschweifte Klammern verwendet werden:

// Sass
nav
  ul
    margin: 0
    padding: 0

// SCSS
nav {
  ul {
    margin: 0;
    padding: 0;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4. Mixer

Die Definition und der Aufruf des Mixers sind in beiden Fällen gleich:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }
1
2
3
4
5
6
7
8

5. Interpolation

Die Interpolation wird in beiden Fällen gleich verwendet:

$side: left;
.margin-#{$side} {
  margin-#{$side}: 10px;
}
1
2
3
4

6. Betrieb

Beide unterstützen Operationen in Stilen:

.container {
  width: 100% - 20px;
}
1
2
3

7. Vererbung

Beide unterstützen die Stilvererbung:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Ich werde sie hier hinzufügen, wenn ich sie das nächste Mal in meinem Projekt verwende!