5 Jenis CSS Preprocessor untuk Web Development

Dahulu kala, menulis kode CSS memang cukup menyenangkan, tetapi juga sangat melelahkan. Niat awal hanya akan menulis 100 baris kode, berujung menjadi lebih dari 3 ribu baris. Meski sudah menggunakan komentar sepanjang cerpen, saya kerap tersesat di belantara kode-kode itu. Ya, memang begitulah kehidupan seorang CSS web developer.

Tetapi semua itu berubah saat ada yang namanya CSS preprocessor. Menulis baris demi baris kode CSS menjadi lebih singkat dan lebih mudah dikelola karena modular.

Apa Itu CSS Preprocessor?

CSS preprocessor adalah adalah alat yang digunakan untuk mengubah kode CSS menjadi kode CSS yang lebih efisien dan mudah dikelola. Preprocessor juga memungkinkan kita untuk memperluas kemampuan CSS. Misalnya adanya variabel, fungsi, operasi matematika, dan nesting.

Untuk yang belum familiar dengan preprocessor, prosesnya seperti ini: ketika mengembangkan sebuah website, kita menulis CSS menggunakan CSS preprocessor agar proses pengembangan lebih efisien dan lebih cepat ➡️ kode CSS yang kita tulis di-compile oleh CSS preprocessor ➡️ hasil compile berupa kode CSS biasa.

Contoh penulisan kode CSS menggunakan SCSS:

figcaption {
    font-style: italic;
    font-size: 1rem;

    &.figcaption {
        &__quote {
            color: $black-color;
            font-weight: 600;
            font-size: 1.5rem;

            &::before {
                content: "— ";
            }
        }
    }
}

TETAPI, browser tidak dapat membaca kode tersebut. Maka, kode SCSS tadi akan di-compile atau diterjemahkan oleh compiler ke dalam kode CSS biasa yang bisa dibaca oleh browser seperti ini:

figcaption {
  font-style: italic;
  font-size: 1rem;
}

figcaption.figcaption__quote {
  color: #111;
  font-weight: 600;
  font-size: 1.5rem;
}

figcaption.figcaption__quote::before {
  content: "—";
}

Bagi yang belum terbiasa, menggunakan CSS preprocessor mungkin terlihat sia-sia atau sama saja karena begitu juga pemikiran saya dahulu. Tetapi, setelah mencoba dan terbiasa, kutakmau kembali ke CSS biasa. 😁

Perbedaan CSS Preprocessor dengan CSS Framework

Apa bedanya antara CSS preprocessor dengan CSS framework?

Bagi Anda yang belum familiar atau belum terbiasa menggunakan dan sedikit bingung dengan perbedaan keduanya, mari kita analogikan elemen HTML sebagai sebuah maneken (manekin) dan CSS sebagai kain bahan untuk membuat baju.

• CSS Preprocessor: Dalam analogi maneken dan kain bahan, CSS preprocessor adalah mesin jahit yang memungkinkan kita untuk membuat baju (tampilan CSS) dengan lebih cepat dan lebih rapi. Saat menggunakan vanilla CSS (CSS biasa), kita menjahit secara manual atau jahit tangan, sedangkan dengan CSS preprocessor, prosesnya menjadi lebih terstruktur dan efisien.

• CSS Framework: Dalam analogi yang sama, CSS framework dapat diibaratkan sebagai lemari yang berisi baju-baju yang sudah siap pakai. Di dalam lemari tersebut, kita bisa menemukan berbagai model baju (tampilan atau komponen UI) yang sudah dirancang dan ditata dengan baik. Kita tinggal memilih model baju yang sesuai dengan kebutuhan kita dan menggunakannya langsung, tanpa harus membuat dari awal.

BACA JUGA

7 CSS Framework Terbaik dan Populer

Ada pepatah yang mengatakan bahwa seorang front-end developer tanpa CSS framework ibarat nasi tanpa garam. Oke, mungkin pepatah ini baru saja saya …

Baca Selengkapnya

Dari analogi tersebut, perbandingan antara CSS preprocessor dan CSS framework menjadi lebih jelas:

• CSS preprocessor adalah alat yang digunakan untuk menulis CSS dengan lebih efisien, mirip dengan mesin jahit yang membantu dalam proses pembuatan baju. Sedangkan property dan value tetap harus kita buat sendiri.
• CSS framework, di sisi lain, adalah kumpulan aturan CSS yang sudah siap pakai, seperti lemari berisi baju-baju siap pakai yang bisa langsung kita gunakan. Kita tak perlu mengatur property dan value-nya karena sudah diatur oleh framework.

CSS Preprocessor untuk Web Development

Berikut beberapa CSS preprocessor yang dapat Anda gunakan untuk mengembangkan website.

1. Sass (Syntactically Awesome Stylesheets)

Sass adalah salah satu preprocessor CSS yang paling populer. Ini memungkinkan Anda untuk menulis kode CSS dengan sintaks yang lebih ekspresif dan fitur-fitur seperti variabel, mixin, dan nested rules. Sass kemudian dikompilasi menjadi kode CSS standar sebelum digunakan di situs web Anda.

// Contoh penulisan variabel dengan Sass
$width: 10px
$height: $width + 10px

// Penggunaan variabel pada selector
#header 
  width: $width
  height: $height

2. SCSS (Sassy CSS)

Ini adalah sintaks alternatif untuk Sass yang lebih mirip dengan CSS konvensional daripada sintaks Sass asli. SCSS menggunakan kurung kurawal dan titik koma seperti CSS standar, yang membuatnya lebih mudah diterima oleh banyak pengembang yang sudah terbiasa dengan CSS. Saya sendiri lebih sering menggunakan SCSS karena menurut saya ini lebih mudah digunakan.

// Contoh penulisan variabel dengan SCSS
$width: 10px;
$height: $width + 10px;

// Penggunaan variabel pada selector
#header {
  width: $width;
  height: $height;
}

3. Less (Leaner Style Sheets)

Less adalah preprocessor CSS lain yang mirip dengan Sass. Ini menambahkan fitur-fitur seperti variabel, fungsi, dan mixin ke dalam CSS, dan kemudian menghasilkan kode CSS konvensional saat dikompilasi.

// Contoh penulisan variabel dengan Less
@width: 10px;
@height: @width + 10px;

// Penggunaan variabel pada selector
#header {
  width: @width;
  height: @height;
}

4. Stylus

Stylus adalah preprocessor CSS yang memiliki sintaks yang sangat ringkas dan ekspresif. Ini adalah salah satu preprocessor yang paling fleksibel dalam hal sintaks. Stylus juga memiliki berbagai plugin yang memperluas fungsionalitasnya.

// Contoh penulisan variabel dengan Stylus
width = 10px
height = width + 10px

// Penggunaan variabel pada selector
#header
  width width
  height height

5. PostCSS

PostCSS berbeda dari Sass, Less, dan Stylus karena bukan preprocessor sejati, melainkan sebuah alat pengolahan CSS yang dapat memanipulasi dan mengubah kode CSS Anda. PostCSS sangat modular dan dapat digunakan dengan berbagai plugin untuk melakukan berbagai transformasi pada kode CSS Anda.

Demikian ngobrol-ngobrol kita tentang jenis-jenis CSS preprocessor. Semoga bermanfaat dan sampai jumpa di artikel lainnya. (eL)