Bab I – Pendahuluan
1.1 Latar Belakang
CSS adalah bahasa desain untuk halaman web, sedangkan SASS adalah preprocessor CSS dengan fitur lanjutan.
1.2 Rumusan Masalah
- Apa perbedaan antara CSS dan SASS?
- Apa kelebihan dan kekurangan masing-masing?
- Bagaimana penerapannya dalam proyek web?
1.3 Tujuan
- Menjelaskan fungsi CSS dan SASS
- Menganalisis kelebihan dan kekurangannya
- Memberi contoh implementasi
Bab II – Tinjauan Pustaka
2.1 CSS
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
2.2 SASS
$primary-color: #3498db;
body {
background-color: $primary-color;
font-family: Arial, sans-serif;
h1 {
color: white;
}
}
2.3 Perbandingan
| Aspek | CSS | SASS |
|---|---|---|
| Sintaks | Sederhana | Lebih kompleks dan efisien |
| Variabel | Tidak tersedia | Tersedia |
| Nesting | Tidak tersedia | Didukung |
| Kompilasi | Langsung di browser | Perlu dikompilasi |
Bab III – Metodologi
- Text Editor: VS Code
- Node.js & npm
- SASS Compiler
- Google Chrome
Bab IV – Hasil dan Pembahasan
4.1 Tampilan CSS
.container {
width: 80%;
margin: auto;
color: blue;
}
4.2 Tampilan SASS
$font-color: blue;
.container {
width: 80%;
margin: auto;
color: $font-color;
}
4.3 Pembahasan
SASS membuat style lebih modular dan efisien. Variabel dan nesting sangat membantu dalam proyek berskala besar.
Bab V – Penutup
5.1 Kesimpulan
CSS cocok untuk proyek kecil. SASS lebih baik untuk proyek besar karena kemudahan pengelolaan kode.
5.2 Saran
Gunakan SASS untuk pengembangan skala besar dan pelajari fitur lanjutan seperti mixin dan functions.
Daftar Pustaka
- MDN Web Docs – CSS Documentation
- Sass-lang.com – Official SASS Docs
- W3Schools – CSS and SASS Tutorial