Apa Itu Stylus CSS dan Bagaimana Cara Menggunakannya?

Dalam hal pengembangan web, cara paling umum untuk mendesain aplikasi adalah dengan menggunakan CSS. Namun, CSS dapat menjadi rumit untuk digunakan karena sangat sulit untuk di-debug.

Pelajari cara menggunakan Stylus CSS, dan Anda akan memiliki opsi lain, dengan salah satu praprosesor CSS paling populer yang tersedia.

Apa Itu Preprosesor CSS?

Preprosesor CSS adalah utilitas yang mempermudah penulisan CSS. Mereka sering mengkompilasi kode dari sintaks khusus mereka sendiri ke format .css yang dapat dipahami oleh browser.

Preprosesor CSS seperti Sass, misalnya, menawarkan fitur khusus seperti loop, mixin, penyeleksi bersarang, dan pernyataan if/else. Fitur-fitur ini mempermudah pemeliharaan kode CSS Anda, terutama dalam tim besar.

Untuk menggunakan prosesor CSS, Anda harus menginstal kompiler di lingkungan lokal dan/atau server produksi Anda. Beberapa alat build frontend, seperti Vite, memungkinkan Anda menyertakan praprosesor CSS seperti LessCSS dalam proyek Anda.

Bagaimana Stylus CSS Bekerja

Untuk menginstal Stylus di lingkungan lokal Anda, Anda memerlukan Node.js dan Node Package Manager (NPM) atau Yarn yang diinstal di mesin Anda. Jalankan perintah terminal berikut:

 npm install stylus 

Atau:

 yarn add stylus 

Setiap file Stylus CSS diakhiri dengan ekstensi .styl. Setelah Anda menulis kode CSS Stylus, Anda dapat mengompilasinya dengan perintah ini:

 stylus .

Ini harus mengkompilasi semua file .styl dan mengeluarkan file .css di direktori saat ini. Kompiler Stylus juga memungkinkan untuk mengompilasi file .css menjadi .styl dengan flag –css. Untuk mengonversi file .css ke format .styl, gunakan perintah ini:

 stylus --css style.css style.styl 

Sintaks dan Pemilih Induk di Stylus CSS

Di CSS tradisional, Anda menentukan blok gaya dengan tanda kurung; kegagalan untuk memasukkan karakter ini akan menyebabkan gaya rusak. Di Stylus CSS, menggunakan kawat gigi adalah opsional.

Stylus mendukung sintaks mirip Python, artinya Anda dapat mendefinisikan blok menggunakan lekukan, seperti ini:

 .container
    margin: 10px

Blok kode di atas dikompilasi ke CSS berikut:

 .container {
  margin: 10px;
}

Sama seperti di preprosesor CSS seperti Less, Anda dapat mereferensikan pemilih induk dengan karakter & :

 button
    color: white;
    &:hover
        color: yellow;

Yang mengkompilasi ke:

 button {
  color: #fff;
}
button:hover {
  color: #ff0;
}
 

Cara Menggunakan Variabel di Stylus CSS

Dalam preprosesor CSS seperti Less CSS, Anda mendefinisikan variabel dengan karakter @, sedangkan CSS tradisional menggunakan “–” untuk mendefinisikan variabel.

Di Stylus, semuanya sedikit berbeda: Anda tidak memerlukan simbol khusus untuk mendefinisikan variabel. Alih-alih, cukup tentukan variabel menggunakan tanda sama dengan (=) untuk mengikatnya ke nilai:

 bg-color = black

Anda sekarang dapat menggunakan variabel dalam file .styl seperti ini:

 div
    background-color: bg-color

Blok kode di atas dikompilasi ke CSS berikut:

 div {
  background-color: #000;
}

Anda dapat menentukan variabel null dengan tanda kurung. Misalnya:

 empty-variable = ()

Anda dapat mereferensikan nilai properti lain menggunakan simbol @. Misalnya, jika Anda ingin menyetel tinggi div menjadi setengah dari lebarnya, Anda dapat melakukan hal berikut:

 element-width = 563px
div
    width: element-width
    height : (element-width / 2)
 

Itu akan berhasil, tetapi Anda juga dapat menghindari membuat variabel sama sekali dan sebagai gantinya mereferensikan nilai properti lebar:

 div
    width: 563px
    height: (@width / 2)

Dalam blok kode ini, simbol @ memungkinkan Anda merujuk properti lebar sebenarnya pada div. Terlepas dari pendekatan yang Anda pilih, saat Anda mengompilasi file .styl, Anda harus mendapatkan CSS berikut:

 div {
  width: 563px;
  height: 281.5px;
}

Fungsi dalam Stylus CSS

Anda dapat membuat fungsi yang mengembalikan nilai di Stylus CSS. Katakanlah Anda ingin mengatur properti text-align dari div ke “center” jika lebarnya lebih besar dari 400px, atau “left” jika lebarnya kurang dari 400px. Anda dapat membuat fungsi yang menangani logika ini.

 alignCenter(n)
    if (n > 400)
        'center'
    else if (n < 200)
        'left'
div {
    width: 563px
    text-align: alignCenter(@width)
    height: (@width / 2)
}
 

Blok kode ini memanggil fungsi alignCenter, meneruskan nilai properti width dengan mereferensikannya dengan simbol @. Fungsi alignCenter memeriksa apakah parameternya, n, lebih besar dari 400, dan mengembalikan “pusat” jika ya. Jika n kurang dari 200, fungsi mengembalikan “kiri”.

Ketika kompiler berjalan, itu harus menghasilkan output berikut:

 div {
  width: 563px;
  text-align: 'center';
  height: 281.5px;
}

Di sebagian besar bahasa pemrograman, fungsi menetapkan parameter berdasarkan urutan yang Anda berikan. Hal ini dapat menyebabkan kesalahan akibat melewatkan parameter dengan urutan yang salah, yang kemungkinan besar semakin banyak parameter yang harus Anda lewati.

Stylus memberikan solusi: bernama parameter. Gunakan mereka alih-alih parameter yang dipesan saat Anda memanggil suatu fungsi, seperti ini:

 subtract(b:30px, a:10px)  

Kapan Menggunakan Preprosesor CSS

Preprosesor CSS adalah utilitas yang sangat kuat yang dapat Anda gunakan untuk merampingkan alur kerja Anda. Memilih alat yang tepat untuk proyek Anda dapat membantu meningkatkan produktivitas Anda. Jika proyek Anda hanya membutuhkan sedikit CSS, maka menggunakan praprosesor CSS mungkin berlebihan.

Jika Anda membangun proyek besar, mungkin sebagai bagian dari tim, yang mengandalkan CSS dalam jumlah besar, pertimbangkan untuk menggunakan preprosesor. Mereka menawarkan fitur seperti fungsi, loop, dan mixin yang mempermudah penataan proyek yang kompleks.