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 kustom mereka sendiri ke .css format yang dapat dipahami 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 Preprosesor CSS seperti LessCSS dalam proyek Anda.

Bagaimana Stylus CSS Bekerja

Untuk menginstal Stylus di lingkungan lokal Anda, Anda memerlukan Node.js dan keduanya Manajer Paket Node (NPM) atau Yarn dipasang di mesin Anda. Jalankan perintah terminal berikut:

npm instal stylus

Atau:

benang menambahkan stylus

Setiap file Stylus CSS diakhiri dengan a .gaya perpanjangan. Setelah Anda menulis kode CSS Stylus, Anda dapat mengompilasinya dengan perintah ini:

pena .

Ini harus mengkompilasi semua .gaya file dan keluaran .css file di direktori saat ini. Kompiler Stylus juga memungkinkan untuk dikompilasi .css file ke dalam .gaya dengan --css bendera. Untuk mengonversi a .css mengajukan ke .gaya format, 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:

.wadah
batas: 10px

Blok kode di atas dikompilasi ke CSS berikut:

.wadah {
batas: 10px;
}

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

tombol
warna: putih;
 &:arahkan
warna: kuning;

Yang mengkompilasi ke:

tombol {
warna: #fff;
}
tombol:arahkan {
warna: #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. Sebagai gantinya, cukup tentukan variabel menggunakan tanda sama dengan (=) untuk mengikatnya ke suatu nilai:

bg-color = hitam

Anda sekarang dapat menggunakan variabel di .gaya berkas seperti ini:

div
warna latar belakang: bg-color

Blok kode di atas dikompilasi ke CSS berikut:

div {
warna latar belakang: #000;
}

Anda dapat menentukan variabel null dengan tanda kurung. Misalnya:

variabel kosong = ()

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

elemen-lebar = 563px
div
lebar: elemen-lebar
tinggi: (elemen-lebar / 2)

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

div
lebar: 563px
tinggi: (@lebar / 2)

Dalam blok kode ini, file @ simbol memungkinkan Anda untuk mereferensikan yang sebenarnya lebar properti di div. Terlepas dari pendekatan yang Anda pilih, saat Anda mengkompilasi .gaya file, Anda harus mendapatkan CSS berikut:

div {
lebar: 563px;
tinggi: 281.5px;
}

Fungsi dalam Stylus CSS

Anda dapat membuat fungsi yang mengembalikan nilai di Stylus CSS. Katakanlah Anda ingin mengatur perataan teks properti div ke "pusat" jika lebar lebih besar dari 400px, atau "kiri" jika lebar kurang dari 400px. Anda dapat membuat fungsi yang menangani logika ini.

alignCenter(N)
jika (N > 400)
 'tengah'
kalau tidakjika (N < 200)
 'kiri'
div {
lebar: 563px
perataan teks: alignCenter(@lebar)
tinggi: (@lebar / 2)
}

Blok kode ini memanggil alignCenter fungsi, melewati lebar nilai properti dengan referensi dengan @ simbol. Itu alignCenter fungsi 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 {
lebar: 563px;
perataan teks: 'tengah';
tinggi: 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:

mengurangi(B:30px, A:10 piksel)/*-20px*/

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.