Condivisione della tecnologia

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

Sass e SCSS sono due sintassi di Sass (Syntacically Awesome Stylesheets). Sono entrambi utilizzati per scrivere CSS più strutturati e gestibili. Ecco i loro principali confronti nella sintassi e nelle funzionalità:

1. Formato grammaticale

Sass (sintassi dell'indentazione)

• senza parentesi graffe {} e punto e virgola;。
• Utilizzare il rientro per indicare le relazioni nidificate e gerarchiche.

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

SCSS (CSS impertinente)

• Simile al CSS standard, utilizzando le parentesi graffe {} e punto e virgola;。
• Compatibile con tutto il codice CSS esistente.

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

2. Variabili

Entrambi supportano le variabili e hanno la stessa sintassi:

$primary-color: #333;

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

3. Nidificazione

Entrambi supportano l'annidamento, ma in Sass l'annidamento utilizza il rientro, mentre in SCSS vengono utilizzate le parentesi graffe:

// 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. Miscelatori

La definizione e l'invocazione del mixer sono le stesse in entrambi:

@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. Interpolazione

L'interpolazione è usata allo stesso modo in entrambi:

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

6. Operazione

Entrambi supportano le operazioni negli stili:

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

7. Eredità

Entrambi supportano l'ereditarietà dello stile:

.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

Li aggiungerò qui la prossima volta che li userò nel mio progetto!