Stylus, metin düzenleyicimizde daha kolay çalışmamızı sağlayan bir CSS kod ön işlemcisidir ve aşağıda bu ifademin nedenlerini açıklayacağım.
Bu bildiğimiz biçimiyle bir stil sayfası:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz sınır yarıçapı: 5px; kenarlık yarıçapı: 5px; }
Ve bu, Stylus ile oluşturulmuş aynı stil sayfası olurdu :
vücut yazı tipi 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Tuşlar nerede? Noktalı virgüller ve iki nokta üst üste nereye gitti? Unutuldular. Kalem bunu bizim için yapıyor.
Eğer CSS ve HTML'e yeni başlıyorsanız , Stylus kullanmanız önerilmez çünkü işlerin nasıl yürüdüğünü unutabilirsiniz. Ancak bu alanda bir süredir çalışıyorsanız ve kod ve emekten tasarruf etmek istiyorsanız... kullanabilirsiniz.
Python programcıları Stylus'ta alıştıkları şeye çok benzer bir şey bulacaklar , çünkü sihrin gerçekleşmesi için yalnızca doğru girintilemeyi yapmaları yeterli.
Montaj
Stylus'un çalışması için Node.js'i kurmamız gerekiyor , bu da Community dalında bulunuyor, bu yüzden onu kurmaya başlayalım:
$ sudo pacman -S nodejs
Ve sonra Stylus'u kuruyoruz. Geleneksel yöntem şu şekilde olacaktır:
$ npm install -g stylus
İyi yüklüyor, ancak benim için çalışmıyor, bu yüzden AUR'dan yüklemek çok daha kolay:
$ yaourt -S nodejs-stylus
Stylus nasıl kullanılır
Tamam, Node.js ve Stylus'u kurduk . Peki bunları nasıl kullanacağız? Çok basit. Diyelim ki şu dosyaları içeren bir dizinimiz var:
- dir - index.html - style.css
Yapmamız gereken şey , üzerinde çalışacağımız style.styl dosyasını oluşturmak. Bu dosyada şöyle bir şey olabilir:
body background-color #ffff font-size 12px a.button rengi kırmızı dolgu 10px
Kaydedersek veya herhangi bir değişiklik yaparsak hiçbir şey olmaz, çünkü dosyamızı "derlemiyoruz". Derlemek için, dizinimizde ( style.styl dosyasının bulunduğu yerde ) bir terminal açıp şu komutu çalıştırıyoruz:
stylus -c style.styl
Ancak style.styl dosyasını her kaydettiğimizde kodu çalıştırmamız gerekirdi, neyse ki buna gerek yok çünkü aynı komutu -w (izle) parametresini ekleyerek çalıştırdığımızda şu oluyor:
stylus -c -w style.styl izleme /usr/lib/node_modules/stylus/lib/functions/index.styl compiled style.css watch style.styl compiled style.css compiled style.css
Yani dosya otomatik olarak derlenir .. Sonuç olur mu?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Gördüğünüz gibi, bu sadece CSS kodumuzu oluşturmakla kalmıyor , aynı zamanda gereksiz boşlukları da kaldırarak stil dosyamızın boyutunu küçültüyor.
Üstelik Stylus , CSS dosyalarını kendi formatına dönüştürmemize olanak tanıyor ve sözdizimini kullanabileceğimiz yollar inanılmaz derecede çeşitli. Ve bu sadece bir başlangıç. Dolayısıyla, ilgileniyorsanız, Stylus hakkında daha fazla bilgi edinmenizi tavsiye ederim.