Stylus adalah pre-processor kode CSS , yang memungkinkan kita untuk bekerja lebih mudah di editor teks kita, dan di bawah ini saya akan menjelaskan alasan pernyataan saya.
Ini adalah style sheet yang kita kenal:
tubuh {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; radius batas: 5px; }
Dan ini akan menjadi stylesheet yang sama yang dibuat dengan Stylus:
font tubuh 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Di mana tombol-tombolnya? Ke mana perginya titik koma dan titik dua? Hilang begitu saja. Stylus yang melakukannya untuk kita.
Jika Anda baru memulai dengan CSS dan HTML, menggunakan Stylus tidak disarankan karena Anda mungkin lupa bagaimana cara kerjanya. Tetapi jika Anda sudah lama berkecimpung di bidang ini dan ingin menghemat kode dan tenaga... silakan saja.
Para programmer Python akan menemukan sesuatu yang sangat mirip dengan apa yang biasa mereka gunakan di Stylus , karena mereka hanya perlu melakukan indentasi dengan benar agar keajaiban terjadi.
Instalasi
Agar Stylus dapat berfungsi, kita perlu menginstal Node.js, yang terletak di cabang Community, jadi mari kita lanjutkan dengan menginstalnya:
$ sudo pacman -S nodejs
Dan kemudian kami memasang Stylus. Cara tradisionalnya adalah:
$ npm install -g stylus
Ini menginstal dengan baik, tetapi tidak berhasil untuk saya, jadi jauh lebih mudah untuk menginstal dari AUR:
$ yaourt -S nodejs-stylus
Cara menggunakan Stylus
Oke, kita sudah menginstal Node.js dan Stylus . Bagaimana cara menggunakannya? Sangat mudah. ​​Misalnya, kita memiliki direktori dengan file-file berikut:
- dir - index.html - style.css
Yang perlu kita lakukan adalah membuat file style.styl , yang akan kita gunakan. Di dalam file tersebut, kita bisa memiliki sesuatu seperti:
body background-color #ffff font-size 12px a. warna tombol padding merah 10px
Jika kita menyimpan atau membuat perubahan apa pun, tidak akan terjadi apa-apa, karena kita tidak "mengkompilasi" file kita. Untuk mengkompilasinya, kita membuka terminal di direktori kita (tempat file style.styl berada ) dan menjalankan perintah berikut:
stylus -c style.styl
Namun setiap kali kita menyimpan file style.styl , kita harus menjalankan kode tersebut, tetapi untungnya itu tidak perlu, karena jika kita menjalankan perintah yang sama, tetapi menambahkan parameter -w (watch), maka hal berikut akan terjadi:
stylus -c -w style.styl watching /usr/lib/node_modules/stylus/lib/functions/index.styl mengkompilasi style.css menonton style.styl mengkompilasi style.css style.css
Dengan kata lain, file tersebut secara otomatis terkompilasi .. Akankah hasilnya seperti itu?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Seperti yang Anda lihat, ini tidak hanya membuat kode CSS kita , tetapi juga menghilangkan spasi yang tidak perlu sehingga stylesheet kita menjadi lebih ringan 
Tidak hanya itu, Stylus memungkinkan kita untuk mengkonversi file CSS ke formatnya, dan cara kita dapat menggunakan sintaksnya sangat beragam. Dan ini hanyalah sebagian kecilnya. Jadi, jika Anda tertarik, saya mendorong Anda untuk mempelajari lebih lanjut tentang Stylus.