Perbedaan Singkat CSS dan SASS

CSS (Cascading Style Sheets) dan SASS (Syntactically Awesome Stylesheets) adalah dua teknologi yang digunakan untuk mendesain tampilan sebuah website. SASS adalah sebuah preprocessor CSS yang memungkinkan penulisan kode CSS dengan cara yang lebih efisien dan terstruktur. Berikut adalah perbedaan rinci antara CSS dan SASS:

1. Sintaksis:

CSS:
- Menulis aturan gaya menggunakan sintaks standar yang harus mengikuti format tertentu (misalnya, menggunakan tanda kurung {} untuk blok aturan dan tanda titik koma ; di akhir setiap deklarasi).
- Contoh:
```
css

.container {
  width: 100%;
  margin: 0 auto;
}
```
SASS:
- SASS memungkinkan penulisan tanpa menggunakan kurung kurawal {} dan titik koma ;, menjadikannya lebih ringkas dan mudah dibaca. SASS menggunakan indentasi untuk mendefinisikan blok aturan.
- Contoh:
```
scss

.container
  width: 100%
  margin: 0 auto
```
- Catatan: SASS menggunakan ekstensi file .sass.
SCSS (Sassy CSS):
- SCSS adalah sintaksis yang lebih mirip dengan CSS, di mana tanda kurung kurawal {} dan titik koma ; masih digunakan, namun dengan fitur tambahan dari SASS.
- Contoh:
```
scss

.container {
  width: 100%;
  margin: 0 auto;
}
```
- Catatan: SCSS menggunakan ekstensi file .scss dan lebih populer dibandingkan dengan SASS.

2. Variabel:

CSS:
- CSS tidak memiliki konsep variabel (sebelum CSS Custom Properties atau CSS Variables diperkenalkan di CSS modern).
- Contoh (CSS Variables):
```
css

:root {
  --primary-color: #3498db;
}
.container {
  color: var(--primary-color);
}
```
SASS:
- SASS mendukung variabel secara langsung, yang memungkinkan penyimpanan nilai seperti warna, ukuran, atau font dalam variabel untuk digunakan kembali di seluruh stylesheet.
- Contoh:
```
scss

$primary-color: #3498db;

.container {
  color: $primary-color;
}
```

3. Nested (Pemrograman Bersarang):

CSS:
- CSS tidak mendukung aturan gaya bersarang (nested). Setiap selektor harus ditulis secara terpisah.
- Contoh:
```
css

.container {
  width: 100%;
}
.container .item {
  margin-top: 10px;
}
```
SASS:
- SASS memungkinkan penulisan aturan gaya bersarang, yang membuat kode lebih terstruktur dan lebih mudah dibaca.
- Contoh:
```
scss

.container {
  width: 100%;
  .item {
    margin-top: 10px;
  }
}
```

4. Mixins:

CSS:
- CSS tidak memiliki konsep mixin. Setiap aturan gaya yang sama harus ditulis ulang.
- Contoh:
```
css

.box {
  border-radius: 5px;
  padding: 10px;
}
```
SASS:
- SASS mendukung mixin, yang memungkinkan Anda mendefinisikan grup properti CSS yang dapat digunakan ulang tanpa menulis ulang kode.
- Contoh:
```
scss

@mixin box-style {
  border-radius: 5px;
  padding: 10px;
}

.box {
  @include box-style;
}
```

5. Inheritance (Pewarisan):

CSS:
- CSS tidak memiliki fitur pewarisan secara langsung. Anda bisa menggunakan kelas bersama, tetapi tidak ada mekanisme untuk mewarisi gaya dari satu elemen ke elemen lain secara otomatis.
- Contoh:
```
css

.box {
  border-radius: 5px;
  padding: 10px;
}

.rounded-box {
  border-radius: 5px;
  padding: 10px;
}
```
SASS:
- SASS mendukung fitur pewarisan (extend), yang memungkinkan satu selector untuk mewarisi gaya dari selector lain.
- Contoh:
```
scss

.box {
  border-radius: 5px;
  padding: 10px;
}

.rounded-box {
  @extend .box;
}
```

6. Partials dan Imports:

CSS:
- CSS tidak mendukung pembagian file secara langsung. Semua kode harus diletakkan dalam satu file atau diimpor melalui tag <link> di HTML.
- Contoh:
```
html

<link rel="stylesheet" href="styles.css">
```
SASS:
- SASS memungkinkan pembagian kode menjadi beberapa file kecil (partials) yang dapat diimpor ke file utama. Hal ini membantu organisasi dan pemeliharaan kode lebih mudah.
- Contoh (partial):
```
scss

// _variables.scss
$primary-color: #3498db;
```
  Di file utama:
```
scss

@import 'variables';
```

7. Kompatibilitas dan Kompilasi:

CSS:
- CSS adalah format yang langsung digunakan oleh browser. Tidak perlu kompilasi atau pemrosesan tambahan.
- Contoh: File .css bisa langsung digunakan di HTML.
SASS:
- SASS adalah preprocessor yang perlu dikompilasi menjadi file CSS yang biasa digunakan oleh browser. Sebelum digunakan di halaman web, file SASS harus diproses dan dikompilasi menjadi file .css.
- Contoh: Anda perlu menjalankan perintah kompilasi (misalnya, menggunakan Node.js, Ruby, atau alat build seperti Webpack).

8. Komunitas dan Dukungan:

CSS:
- CSS adalah standar yang didukung secara luas oleh semua browser dan telah menjadi bagian integral dari pengembangan web.
SASS:
- SASS sangat populer di kalangan pengembang frontend karena kemampuannya yang lebih kuat dan fleksibel daripada CSS standar. Banyak framework seperti Bootstrap menggunakan SASS untuk styling mereka.

Kesimpulan:

CSS adalah bahasa gaya standar untuk web, sementara SASS adalah preprocessor yang memperkenalkan fitur tambahan seperti variabel, nesting, mixins, dan lain-lain untuk menulis kode CSS yang lebih efisien dan mudah dikelola.
SASS perlu dikompilasi ke dalam CSS sebelum dapat digunakan oleh browser, sedangkan CSS dapat langsung digunakan tanpa perlu kompilasi.

Semoga penjelasan ini memberikan gambaran yang jelas mengenai perbedaan antara CSS dan SASS!