Stylus'u girişimde ölmeden ArchLinux'a yükleyin

pikap iğnesi bir kod ön işlemcisidir CSS, bu da metin editörümüzde daha basit çalışmamızı sağlıyor ve ardından ifademin nedenlerini açıklıyorum.

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, ile oluşturulan aynı stil sayfası olacaktır. ekran kalemi:

vücut yazı tipi 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px

Anahtarlar nerede? Noktalı virgül nerede, iki nokta üst üste? Unutulmuş, pikap iğnesi bunu bizim için yapar.

Eğer başlıyorsan CSS y HTML kullanılması tavsiye edilmez pikap iğnesi işlerin gerçekte nasıl çalıştığını unutabileceğiniz basit bir gerçek için, ancak bu dünyada zaten zamanınız varsa ve kendinizi kodlamaktan ve çalışmaktan kurtarmak istiyorsanız .. devam edin.

Programcılar Python içinde bulacak pikap iğnesi Uyarlandıklarına çok benzer bir şey, çünkü sihrin yapılması için sadece doğru şekilde girinti yapmanız gerekir.

Montaj

Için pikap iğnesi yüklememiz gereken iş node.js Topluluk şubesinde olduğu için yapmaya devam ediyoruz:

$ 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, zaten yükledik node.js ve biz kurduk pikap iğnesi.. Nasıl Kullanıyoruz? Basit. Diyelim ki aşağıdaki dosyaları içeren bir dizinimiz var:

- dir - index.html - style.css

Yapmamız gereken şey dosyayı oluşturmak stil.stil, üzerinde çalışacağımız şey bu. 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, dosyamızı "derlemediğimiz" için hiçbir şey olmaz. Derlemek için yaptığımız şey dizinimizde bir terminal açmaktır (dosya burada stil.stil) ve yürütürüz:

stylus -c style.styl

Ama dosyayı her kaydettiğimizde stil.stil kodu çalıştırmamız gerekecekti, ancak neyse ki gerekli değil, çünkü aynı komutu çalıştırırsak, ancak parametreyi eklersek -w (izle) aşağıdakiler olur:

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, sadece kodumuz bizi yaratmıyor CSS, ancak stil sayfamızın daha hafif olması için gereksiz boşlukları ortadan kaldırır 😀

Sadece bu da değil, pikap iğnesi CSS dosyalarını biçimlerine geçirmemize olanak tanır ve sözdizimini kullanma şeklimiz çok çeşitlidir. Ve bu sadece bir ön izleme. Bu yüzden, ilgileniyorsanız sizi, hakkında biraz daha bilgi edinmenizi tavsiye ederim. pikap iğnesi