Berbagi teknologi

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

Sass dan SCSS adalah dua sintaksis Sass (Syntactically Awesome Stylesheets). Keduanya digunakan untuk menulis CSS yang lebih terstruktur dan mudah dipelihara. Berikut adalah perbandingan utama mereka dalam sintaksis dan fitur:

1. Format tata bahasa

Sass (sintaks lekukan)

• tidak ada kurung kurawal {} dan titik koma;。
• Gunakan indentasi untuk menunjukkan hubungan bertingkat dan hierarki.

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

SCSS (CSS Sassy)

• Mirip dengan CSS standar, menggunakan kurung kurawal {} dan titik koma;。
• Kompatibel dengan semua kode CSS yang ada.

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

2. Variabel

Keduanya mendukung variabel dan memiliki sintaks yang sama:

$primary-color: #333;

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

3. Bersarang

Keduanya mendukung nesting, namun di Sass, nesting menggunakan indentasi, sedangkan di SCSS, kurung kurawal digunakan:

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

Definisi dan pemanggilan mixer sama di keduanya:

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

Interpolasi digunakan sama di keduanya:

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

6. Operasi

Keduanya mendukung operasi dalam gaya:

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

7. Warisan

Keduanya mendukung pewarisan gaya:

.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

Saya akan menambahkannya di sini lain kali saya menggunakannya dalam proyek saya!