Stylus adalah pemproses kod CSS, yang membolehkan kami bekerja lebih mudah dalam penyunting teks kami dan kemudian saya menerangkan sebab-sebab penyataan saya.
Ini adalah helaian gaya seperti yang kita ketahui:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; sempadan-jejari: 5px; }
Dan ini akan menjadi lembaran gaya yang sama dengan Stylus:
fon badan 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Di mana kunci? Di manakah titik koma, titik dua? Lupa, Stylus adakah itu untuk kita.
Sekiranya anda bermula dengan CSS y HTML tidak digalakkan digunakan Stylus untuk fakta sederhana bahawa anda boleh melupakan bagaimana keadaan benar-benar berfungsi, tetapi jika anda sudah mempunyai masa di dunia ini dan ingin menyelamatkan diri kod dan bekerja .. teruskan.
Pengaturcara Python akan mencari di Stylus sesuatu yang sangat serupa dengan apa yang disesuaikan dengannya, kerana anda hanya perlu memberi indentasi dengan betul agar sihir itu dapat dilakukan.
Pemasangan
Untuk apa Stylus kerja yang mesti kita pasang Node.js yang ada di cawangan Komuniti, jadi kami terus melakukannya:
$ sudo pacman -S nodejs
Dan kemudian kami memasang Stylus. Cara tradisional adalah:
$ npm install -g stylus
Ia dipasang dengan baik, tetapi tidak berfungsi untuk saya, jadi lebih mudah dipasang dari AUR:
$ yaourt -S nodejs-stylus
Cara menggunakan Stylus
Ok, kita sudah memasang Node.js dan kami telah memasang Stylus.. Bagaimana kita menggunakannya? Ia mudah. Katakan kita mempunyai direktori dengan fail berikut:
- dir - index.html - style.css
Apa yang harus kita buat ialah membuat fail gaya.styl, yang akan kita kerjakan. Dalam fail itu kita boleh mempunyai sesuatu seperti:
latar belakang badan-warna #ffff font-size 12px a.button warna padding merah 10px
Sekiranya kita menyimpan atau membuat perubahan tidak ada yang berlaku, kerana kita tidak "menyusun" fail kita. Untuk menyusunnya, apa yang kami lakukan adalah membuka terminal di direktori kami (di mana failnya gaya.styl) dan kami melaksanakan:
stylus -c style.styl
Tetapi setiap kali kita menyimpan fail tersebut gaya.styl kita harus melaksanakan kodnya, tetapi untungnya tidak perlu, kerana jika kita menjalankan perintah yang sama, tetapi menambahkan parameter -w (tonton) perkara berikut berlaku:
stylus -c -w style.styl menonton /usr/lib/node_modules/stylus/lib/functions/index.styl disusun style.css menonton gaya.styl disusun style.css disusun style.css
Dengan kata lain, fail tersebut disusun secara automatik .. Adakah hasilnya?
badan {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Seperti yang anda lihat, bukan sahaja kod kami membuat kami CSS, tetapi menghilangkan ruang yang tidak perlu sehingga helaian gaya kami lebih berat 😀
Bukan itu sahaja, Stylus Ini membolehkan kita memasukkan fail CSS ke dalam formatnya dan cara kita menggunakan sintaksnya sangat bervariasi. Dan ini hanyalah pratonton. Oleh itu, saya menggalakkan anda jika anda berminat, untuk mengetahui lebih lanjut mengenai Stylus
Ini dengan:
$ sudo npm pasang -g stylus
Tapi kenapa? Sekiranya saya hanya mahu menggunakannya dalam sesi saya .. tapi hei, jika masalahnya ialah .. 🙂
Pada mulanya baik-baik saja, tetapi Stylus digunakan dengan pemalam yang berbeza semasa anda berjalan, contohnya Nib atau Stylus auto prefixer.
Saya berpendapat bahawa apabila anda memasangnya dengan Yaourt, ia tidak disimpan di / usr / local / lib / node_modules dan jika anda cuba mengimport dan menggunakan mana-mana perpustakaan, anda akan menggunakan xD
Kebetulan seperti yang saya katakan di forum, Stylus berdasarkan penggunaan perpustakaan secara telus dari terminal, ini adalah intipati dari prosesor ini, ia melakukan perkara seperti:
stylus -u jeet -u pecah -u typographic -u nib -w style.styl
Untuk mengatakan sesuatu (anda boleh mempunyai alias atau fungsi atau menggunakan tegukan atau dendam, atau apa sahaja: 3). Perkara yang menarik tentang ini adalah bahawa ia tidak mengeluarkan css di luar kotak semasa menyusunnya, tetapi mengisinya "secara dinamik" kerana dalam kod anda, anda memanggil fungsi dan gabungan perpustakaan masing-masing.
Akibatnya, ia akan meletakkan kod rata yang dinyatakan (diset semula, diperbaiki, dan lain-lain) tetapi tidak akan membuat anda merokok misalnya fungsi span () jet jika anda tidak memanggilnya dan itu adalah cinta murni x3
Ini adalah seluruh dunia dan itulah sebabnya saya memberitahu anda, memasangnya dengan cara itu saya tidak tahu fail apa yang masuk ke dalamnya dan saya rasa anda tidak boleh menggunakan pelanjutan itu hanya kerana ketika anda menggunakan baris perintah, gunakan flag akan melihat ke dalam pemasangan stylus, dengan node itu adalah node_modules dan tetap di tempat yang saya katakan di atas, dengan Yaourt, NPI xD
menarik!
Saya cadangkan anda melakukan tutorial Terkini mengenai cara menggunakan nombor SIP untuk memanggil telefon bimbit dari komputer ... secara percuma