Partage de technologie

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

Sass et SCSS sont deux syntaxes de Sass (Syntaxically Awesome Stylesheets). Ils sont tous deux utilisés pour écrire du CSS plus structuré et maintenable. Voici leurs principales comparaisons en termes de syntaxe et de fonctionnalités :

1. Format de grammaire

Sass (syntaxe d'indentation)

• pas d'accolades {} et point-virgule;。
• Utilisez l’indentation pour indiquer les relations d’imbrication et hiérarchiques.

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

SCSS (CSS Sassy)

• Semblable au CSS standard, utilisant des accolades {} et point-virgule;。
• Compatible avec tout le code CSS existant.

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

2. Variables

Les deux prennent en charge les variables et ont la même syntaxe :

$primary-color: #333;

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

3. Nidification

Les deux prennent en charge l'imbrication, mais dans Sass, l'imbrication utilise l'indentation, tandis que dans SCSS, des accolades sont utilisées :

// 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. Mélangeurs

La définition et l'invocation du mixeur sont les mêmes dans les deux cas :

@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

L'interpolation est utilisée de la même manière dans les deux :

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

6. Fonctionnement

Les deux prennent en charge les opérations dans les styles :

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

7. Héritage

Les deux prennent en charge l’héritage de style :

.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

Je les ajouterai ici la prochaine fois que je les utiliserai dans mon projet !