CSS Dersleri
Açıklama satırlarının önemini tekrar anlatmaya gerek yok. Bir çok zaman unuttuğumuz veya iki kelime ile geçiştirdiğimiz açıklama satırları takım çalışmaları ve uzun süreli projelerin olmazsa olmazı. Yani tüm projelerin :) Sass CSS'in açıklama satırı kullanımını aynen destekler. {% highlight sass %} /* Programcının kodu * okuyup anlayamacağı * noktalarını yazalım */ .yildiz display: block {% endhighlight
CSS Dersleri
Sass'ın temel yazım kurallarından biriside iç içe (nested) kullanımdır. CSS ile kod yazarken girintiler çok önemli değildir. Biz daha iyi bir düzen için girintileme yapıyorduk ama bu girintiler CSS için bir şey ifade etmiyordu. Sass'ta ise girintilerin bir anlamı ve işlevi var. CSS ile kod yazarken
CSS Dersleri
Sass'ın ve diğer CSS önişlemcilerinin başlangıçtaki sorunlarından biri de Chrome Developer Tools ve Firebug gibi araçlar ile öğeyi incele dediğimizde kaynak dosyadaki yerini değilde üretilen .css dosyasındaki yerini göstermesidir. Buda bizim için büyük bir sorun. Hayatımıza ilk giren Firebug'ın en büyük getirisiydi tarayıcı üzerinden düzenleme ve
CSS Dersleri
Sass ve CSS önişlemcilerin en önemli getirilerinden biri değişkenlerdir. CSS4 ile birlikte geliştirilmekte olan değişken tanımı var ancak biraz daha kullanışlı olsa iyi olurmuş. Tarayıcı desteğini beklemeliyiz kullanmak için. Bir çok programlama dilinden de alışık olduğumuz değişkenleri Sass sayesinde CSS'te de kullanabiliyoruz. Değişkenler, kod içindeki tekrar tekrar yazdığımız
CSS Dersleri
Compass; Sass'ın araç kutusu gibi tanımlayabiliriz. Önek sorununa çözüm oluşturan mixinleri, otomatik sprite yapma imkanı, dikey hizalama kolaylıkları, kolay ızgara sayfa planları sunan bir Sass araç kutusu olarak tanımlanabilir. Ayrıca eklenti desteği yardımı ile daha fazla geliştirilebilen bir araç kutusu. Peki ben niye Compass kullanmıyoum. Compass'ın
CSS Dersleri
Sass ile kod yazmaya başlarken ikileme düşüren bir sorun. Sass mı kullansam SCSS ( Sassy CSS - Sass'lı CSS ) mı kullansam tercihidir. Sass ilk kodlanmaya başladığında Haml ile birlikte çıktığı için söz dizimi benzer şekilde uygulanmış ve uzantıları .sass olarak üretilmeye başlanmış. Sonra Sass 3 ile birlikte SCSS kullanılmaya
CSS Dersleri
Bir önceki yazımda Sass'a giriş yapmıştık. Bu makale de klasör yapımızın Sass sonrası nasıl olması gerektiğini gösterelim. Klasör yapısını baştan ayarlamak her zaman iyidir. Her ne kadar ben burada bir yapı sunsam da klasör yapısı geliştiricinin kendi çalışma şartlarına göre esnetip yenilemesi gerekir. CSS ile kod yazarken dosyaların
CSS Dersleri
Üç adet popüler CSS önişlemcisi var. SASS, LESS ve Stylus. Dinamik CSS yazımı ile ilgili daha önce Stylus ile ilgili bir makale yazmıştım. Stylus yazımda da belirttiğim gibi bunlardan birini tercih etmek yeterli bence. Birbirlerine olan üstünlükleri çok ayırt edici değil. Sass'ın diğerlerine göre ilk olmak ve çok
CSS Dersleri
CSS'in devamlı geliştirilmekte olmasının avantajları ve dezavantajları var. Dezavantajlara flex özelliğinin 3 kere değişmesini gösterebiliriz. Avantajları çok tabi. Bunlardan bir tanesine örnek bu makalenin konusudur. Artalan resimlerinin konumlandırmasında bazı sorunlar vardı. Bu sorunları görerek mevcut tanım geliştirildi. Daha önce anlattığımız artalan tanımına artı özellikler eklendi. {% highlight css %} div
CSS Dersleri
Daha önce denediğimde bazı tarayıcıların sorun çıkardığını hatırlıyorum. Aklımda öyle kalmış. Bundan dolayı bu özelliği bugüne kadar hiç kullanmadım. Bir iş dolayısıyla kullanmam gerektiğinde çalıştığını görünce sevindim. Hatta denedeğim tüm tarayıcılarda (IE8 dahi) çalıştı. 2006'da yazdığım CSS'de Metin(Text) Özellikleri yazısından text-transform'dan bahsetmişim. Kod
CSS Dersleri
CSS'de değişken kullanmak şu an için mümkün değil. Eğer CSS Önişlemcilerini kullanıyorsanız o başka. currentColor değerini bir değişken olarak kabul edebiliriz. Tarayıcı desteğine baktığımızda tüm yeni nesil tarayıcılar destekliyor, ayrıca ie9+, gayet güzel. currentColor değeri; Mevcut elemanın color değerini referans alan bir değişkendir. inherit değerine benzerdir, inherit değerinin
CSS Dersleri
Daha önce yazacaktım ama desteği çok düşüktü. Webkit'in %82(mobil + web) desteğinden sonra uygulanabilirliği arttı. Ben Firefox'tan destek bekledim ama ondan ses çıkmadı. Tasarımcıların form elemanlarını tasarlama sevdası hiç bitmedi, bitmeyecek de :D Tüm ihtiyaçları CSS ile halledebilsek sorun yok da işin içine javascript girince durum