CSS Ön-derleryicileri ile Dinamik CSS Yazmak (TASLAKTIR)
CSS ile kod yazarken büyük projelerde ne kadar dikkatli olsak da sonunda binlerce satırlık kodlar çıkabiliyor. Düzenli olmamız ve Firebug yardımı olsa da bu kodlar içinde dolaşmak ve yönetmek bazı sorunlar neden oluyor. CSS ön-derleyicileride burada devreye giriyor.
CSS ön-derleyicileri değişken tanımı, css fonksiyonları, fazla kod işaretçilerinden kurtarma kalıtsallık ve 4 işlem gibi özellikleri ile bizlere yardımcı oluyor. Kısacası CSS’e dinamik bir yazım kazandırıyor.
Ben burada size bilenen 3 ön derleyicinin karşılaştırmasını yapacağım, karar vermek zor, ama şöyle bir durum var ki hangisine karar verirsek verelim çok büyük kaybımız olmayacaktır.
Başlama bakımından less sadece bir js dosyası ile başlayabildiğimiz için daha mantıklı less tak-çalıştır mantığı ile çalışırken sass ve stylus için biraz ortam hazırlamak gerekiyor.
Tabi bu ortam hazırlama işini bir sefer yapıyoruz.
Daha az kod yazmak, Esneklik
Stylus ile daha az kod yazıyoruz, ancak daha az kod yazarken kod içinde kaybolmuyoruz?
Sass ve Less bu konuda normal css işaretlerini kullanırken stylus bu konuda bayağı bir esneklik sağlıyor. Sass’ında Stylus benzeri kullanım opsiyonu var.
İç İçe Seçiciler (Nesting)
Etkinlik için ard arda uzun seçiciler yazmak yerine iç içe tanımlar ile bu daha kolay sağlanır. Bu bize temiz bir Kalıtsallık sağlar ve kısa kodlama.
Ancak sass bunu desteklerken stylus’un desteklememeside bir eksi olabilir.
Değişkenler bir kere tanımlanan bir değeri bir çok defa kullanmamızı sağlayan yapılardır. Bir yerde değiştirdiğimizde tüm projede değiştirmenize olanak sağlar.
Değişken kullanımı css prececor ile yapılan güzel bir özellik ki CSS4 ile birlikte normal css’e de geldi.
Bir özelliğin veya benzer bir sınıfın diğer bir özelliğe kalıtsal olarak geçmesini sağlar.
Özellik için değişken kullanımı stylus daha avantajlı görüldü.
Css fonksiyonları bir sınıfa tanımlanmış tüm özellik leri başka bir yerde kullanmanıza yarar. Değişkenlere benzer fakat tüm sınıfı içerir. Ayrıca fonksiyon gibi parametre de alabilir.
Stylus’un az kod yazma prensibi bu tip karmaşık yapılarda öne çıkıyor.
renk geçişi ve renk tanımlarında
Her birinde dört işlemi CSS içinde yapabiliyoruz.
http://www.viget.com/inspire/some-lesser-known-features-of-less/
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
http://www.sitepoint.com/a-comprehensive-introduction-to-less/
http://www.vanseodesign.com/css/css-preprocessors/ (****)
http://www.hongkiat.com/blog/less-tips-tools/
http://designshack.net/articles/css/sass-vs-stylus-who-wins-the-minimal-syntax-battle/ (sass ve stylus karşılaştırması)
http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/ (sass, less ve stylus karşılaştırması)
http://learnboost.github.com/stylus/
http://css-tricks.com/poll-results-popularity-of-css-preprocessors/ anket
http://css-tricks.com/sass-vs-less/ sass ve less karşılaştırması
http://thechangelog.com/stylus-expressive-robust-feature-rich-css-language/ (stylus)
http://www.sitepoint.com/a-comprehensive-introduction-to-less/ (less e başlamak)
http://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/ (lesss mixins)
http://verekia.com/less-css/dont-read-less-css-tutorial-highly-addictive (less)
http://webmagazin.co/sass-kullanalim-ve-kullandiralim/ (sass)
http://webmagazin.co/less-csse-heyecan-katin-genel-bakis/ (less)
http://www.wellfireinteractive.com/blog/introduction-to-stylus/ (stylus)
http://nylira.com/stylus-the-revolutionary-successor-to-css/ (stylus örnek kaşılaştırma)
http://visionmedia.github.io/nib/ (stylus)
http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/ (less chrome)
http://joyent.com/blog/installing-node-and-npm/
http://stackoverflow.com/questions/7507720/error-installing-npm-for-node-js
Sonrasında node.js paket yöneticisi npm yardımı ile stylus’u kuruyoruz.
sudo npm install -g stylus
Her yerden erişmek için -g kullanıyoruz.
**Sublime Text 2 için stylus **
https://github.com/billymoon/Stylus/
http://willnathan.com/valise/2013/3/22/installing-nib-for-stylus-within-express
çalıştırarak yaptığımız değişiklikleri anında css çevrilmesini ve tarayıcıda görmemizi sağlıyor. Benim ilk önderleyici kullanımından vaz geçiren özellik bu idi.
Önderleyiciler ile çalışırken dosya yapısını baştan kurmak mantıklı bootsrap benzer bir yapıyı örnek alarak bir yapı oluşturdum.
./index.html |-- index.styl |-- reset.styl |-- buttons.styl |-- global.styl
Böyle farklı dosyalardan mixing yapabiliyoruz.
Diğer derleyicilerden farklı olarak herhangi bir işaret kullanmadan direk tanım yapılır
Stylus un diğerlerinden farklı güzellik leri özellik yakalama özelliğidir
position: absolute top: 50% left: 50% width: w = 150px height: h = 80px margin-left: -(w / 2) margin-top: -(h / 2)
Ayrıca değişken tanımlamadan da yapılır.
position: absolute top: 50% left: 50% width: 150px height: 80px margin-left: -(@width / 2) margin-top: -(@height / 2)
Ayrıca koşullu değişken tanımı da vardır.
position() position: arguments z-index: 1 unless @z-index
z-index: 20 position: absolute
Tanımı ile z-Index tanımı olmayanlara 1 otomatik olarak tanımlanır.
Özellik bakma özelliği değer bulana kadar yukarı çıkar.
body color: red ul li color: blue a background-color: @color
Link rengi mavi olacaktır.
Stylus’da yorumlar javascript kullanımı gibi
// ie7 fix et body margin 0 // ie7 fix /* * Çoklu satırlı yorum */
CSS Fonksiyonları(mixing)
Javascript’ten alıştığımız fonksiyonlara yakın bir kullanımı olan mixing’in kullanımı çok basit.
border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n
form input[type=button] border-radius(5px)
red = #E33E1E yellow = #E2E21E
.message padding: 10px font: 14px Helvetica border: 1px solid #eee
.warning @extends .message border-color: yellow background: yellow + 70%
.error @extends .message border-color: red background: red + 70% .fatal @extends .error font-weight: bold color: red
Bazı nednelerdenden dolayı stylus ile sorun yaşadığınız kod bloklarında css’e geri dön demek mümkün.
@css{ footer:after{ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2ZhZmFmYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); }
svg kullanımı için çözüm bulamadım çözüm css dönmek.
Stylus ile sprite kullanmak
https://github.com/andris9/stylus-sprite
Firebug da stylus satır numaralarını görmek
İlk başta biraz alışmak gerekiyor ama sonra kendi yazdıkların tekrarlayınca hızlanıyorsun.
Gizli karakterler göstermek
Stylus ile kod yazarken boşluk, tab ve enter karakterlerini görmek koddaki sıkıntıları görmek için avantaj sağlıyor. Sublime Text’in böyle bir özelliği yok ama Trailling Settting diye bir eklenti ihtiyaçları karşılıyor gibi.
preferences->settings-default 'ta "draw_white_space":"all" yaparak gösterebiliyoruz.
CSS Kodlarımızı Stylus’a çevirmek
stylus -C dosya_adi.css cikan_dosya.styl
ve css dosyamız styl çevrildi.
http://css2stylus.com/ çevrimi içi araç stylus dan daha iyi çeviriyor.
https://npmjs.org/~tjholowaychuk (stylus geliştiricilerinden) https://npmjs.org/~kizu (stylus geliştiricilerinden) ie için çözüm önerisi
sublime text 2 stylus otomatik tamamlamayı çalıştıramadım
Firestylus çalıştıramadım, veya stylus -l şeklinde css içine basıyor.
Girintileme nedeni ile çıktı olan css de seçici zinciri uzuyor
özellik seçicileri kullanımında sıkıntı var
otomatik kısaltma bazı sorunlara neden oluyor. örn #ffffff
https://github.com/LearnBoost/stylus/issues/581 burada çözümü var, ama -1 aldı benden
https://github.com/shomeya/bootstrap-stylus/blob/v1.4.0-stylus/lib/mixins.styl (stylus örnekleri)
http://daker.me/2013/07/why-stylus-fit-better-my-needs.html
romaincrisis
jbbartram-illu
titsay
blakekathryn
2087
areudirty
turnnoffyourmind
dailybridgerton
jacobvanloon