profile picture

SCSS dan CSS

14 Mar 2025

penjelasan tentang perbedaan SCSS dan CSS

  • Pengertian dan definisi CSS dan SCSS

    • CSS(Cascading Style Sheets) adalah bahasa pemograman yang digunakan untuk mengatur tampilan dan layout web. Dengan CSS, pengguna dapat mengontrol tampilan dari elemen HTML seperti font, warna, ukuran, dan tata letak. Sedangkan, SCSS (Sassy Cascading Style Sheets) adalah sebuah preprocessor CSS yang memungkinkan pengguna untuk menulis CSS dengan syntax yang lebih mudah dipahami. SCSS memungkinkan pengguna untuk menggunakan fitur yang tidak tersedia di CSS standar seperti variabel, looping, dan nesting.

  • Perbedaan Fitur CSS dan SCSS
    • Fitur CSS SCSS
    Syntax Menggunakan aturan standar CSS yang eksplisit Sintax lebih ringkas dan mirip bahasa pemograman
    Variabel Tidak mendukung variabel secara narative (sebelum CSS custom properties) Mendukung Variabel ($) untuk warna, ukuran, dll
    Nesting Tidak mendukung nesting (harus ditulis terpisah). contoh

    .title{
    font-size: 16px;
    }

    harus mengulang penulisan jika ingin menambahkan hover effect

    .title:hover{
    font-size: 10px;
    }    		 Mendukung nesting, sehingga lebih terstruktur dan rapi. contoh

    .title{
    font-size: 16px;

    &:hover{
    font-size: 10px
    }
    }
    Looping Tidak mendukung perulangan Mendukung perulangan seperti @for, @each, dll
    File eksternal Bisa menggunakan file external .css saja Bisa menyusun dalam banyak file .scss dan @import


  • Kelebihan dan kekurangan CSS dan SCSS

    • Kelebihan yang dimiliki oleh CSS ialah lebih mudah dipahami, tidak memerlukan waktu belajar yang lama, dan cukup untuk digunakan pada website simple. Namun, disamping kelebihan yang telah disebutkan, CSS juga memiki kekurangan diantaaranya susah untuk digunakan pada website yang kompleks, membutuhkan lebih banyak waktu untuk konfigurasinya, dan memiliki keterbarasan dalam menangani website yang kompleks.

    Sedangkan, SCSS memiliki kelebihan dimana SCSS mendukung nested properties, memiliki kemampuan variable dan mixin, dan meningkatkan produktivitas saat mendesain website. Terlepas daripada kelebihan SCSS yang terasa lebih unggul, Namun SCSS membutuhkan waktu belajar lebih lama, kurangnya fleksibelitas untuk pengguna pemula, dan kurang ideal untuk website dengan desain yang simple.