H O K K A
Haber Yazılımında Kampanya İncele
8 Ocak 2015

Sass Modüler CSS Dersleri

Sass bir css düzenleme platformu olmaktadır. Sass ile birlikte css kod yapıları daha etkili ve verimli bir şekile girmiştir. sass-moduler-css-dersleriDaha kolay kullanımlara sahip bir css kodlama yapısı oluşturulmuştur. Bir grid oluştururken bile satırlarca kod yazmaya artık gerek kalmamaktadır. Sass ile birlikte bu yapı daha kolay bir şekile girmiştir. Sass ile birlikte css içinde değişkenler kullanmak artık mümkün bir hale gelmiştir. Bu sayede değerler daha kolay bir yapı ile atanabilmekte ve gerekli eşitlemeler kolayca sağlanabilmektedir. Sass ile birlikte css adına  her şey daha basit bir hale gelmiştir. En basitinden bir renk değiştirme işlemi bile sass yokken zorlu bir süreç olabiliyordu. Sass ile birlikte çok kolay bir şekilde işlemler yapılabilmektedir. Bunların yanında grid işlemleri , selector vb. gibi öğeler de daha basit ve verimli bir şekilde kullanımı mümkün bir hale gelmektedir.

Sass ile gelen yapılardan biri olan değişkenler proje içinde büyük kolaylıklar sağlamaktadır. Sass örneğinde görüldüğü gibi en başta bir renk için bir değişken kullanılmış ve bu değişkene bir kod ataması yapılarak değer girilmiş. Alttaki kod satırında görüldüğü gibi renk kodları değil direkt olarak değişken çağrılmıştır. Bu sayede herhangi bir renk kodunun değiştirilmesi gerektiğinde teker teker kodların hepsinin değiştirilmesine gerek kalmayacak. Sadece yukarıda tanımlanan değişkene ait kod değiştirilerek bu işlem kolayca gerçekleştirilecek.
Diğer yapıda yani sass’tan önceki dönemlerde css atamalarında değişken kullanılmadığı için sürekli renk kodlarına ihtiyaç duyulacaktır. Herhangi bir renk değiştirme durumunda ise hepsinin değiştirilmesi gerekecektir. Bu da projenin daha zorlu bir yapıda olmasına neden olabilecek bir etkendir.

Sass modülü ile birlikte kod yapıları daha düzenli bir hale getirilmiştir. Css örneğinde görüldüğü üzere her class için ayrı bir yapı dizayn edilmiş . Diğer sass örneğinde ise box yapısına ait tekrar tekrar class açma gereksinimine ihtiyaç duyulmamıştır. Box’a ait bir  p bloğu box’u kapsam alanı içine yerleştirilmiştir. Bu sayede daha düzenli ve daha etkili bir kod düzeni oluşturulmuştur. Binlerce satır kod bloğu içinde düzenin önemi büyüktür dolayısı ile bu yapının önemi de büyük olacaktır.
Sass yapısı ile beraber fonksiyonlar kullanılmaya da başlanmıştır. Bu sayede tekrar tekrar kod yazmak ortadan kalkacaktır. Bu sayede bir fonksiyon oluşturulup ona ait özellikler tanımlanır. İhtiyaç duyulduğunda ise o fonksiyon gereken yere kısa bir kod ile çağrılır . Böylece yapılan işlemler daha pratik bir yapıya sahip olacaklardır.
Başka bir classtan özellikleri miras almakta bu yapı ile yani sass ile mümkündür. Örneğin bir .baderror içeriği @extend.error ile miras alınabilir. Css te böyle bir yapı mevcut değildir. Bu özellikte pratikli adına faydalı olabilecek bir diğer özelliktir.