Sass ile modern CSS - Uygulamalı Eğitim

CSS derleme dilleri sayesinde CSS daha etkili bir şekilde yazılabilir. Bu derleme dilleri nedir, hangi türler bulunur ve neden Sass tercih edildiği bu video ile gösterilmektedir.

Sass kullanılmadan önce, onu yüklemek gereklidir. Ve bunun için bir gereklilik olan Ruby'dir. Her ikisi de - yani Ruby ve Sass'ın kurulumu - bu videoda gösterilmektedir. Sonrasında Sass yüklemesinin gerçekten başarılı olup olmadığını hemen test edebilirsiniz.

Sass dosyaları, gerçekten kullanılabilir hale gelmeleri için CSS dosyalarına dönüştürülmelidir. Watch komutu sayesinde tek tek dosyalardaki veya bütün klasörlerdeki değişiklikleri çok kolay bir şekilde tespit edebilirsiniz. Bu kadar.

@import ile SCSS dosyaları içe aktarılıp bir araya getirilebilir. Dosya adının başına alt çizgi eklemekle ilgili olan her şey, bu videonun bir yönüdür.

Sass'ta değişkenlerin tanımlanma imkanı bulunmaktadır. Bu konsept geleneksel CSS'te mevcut olmasa da, Sass'ta stillerin etkili bir şekilde geliştirilmesi için harika bir araçtır.

Yerleştirme sayesinde, Sass sözdizimini CSS'de olduğundan daha sade tutmak mümkün olur. Ayrıca, iç içe geçme size kodu çok daha anlaşılır bir şekilde yazmanıza yardımcı olur.

@extend kullanımı, CSS özelliklerinin bir selektörden diğerine geçmesine olanak tanır. Bu da Sass dosyalarını sade tutmaya yardımcı olur.

Yer tutucu seçici modüllerin tanımlanmasını sağlar. Bu modülerleştirme, Sass sözdiziminin farklı yerlerde dahil edilebilen mantıklı bloklara bölünmesine izin verir.

Mixinler, örneğin iş akışlarını büyük ölçüde basitleştirmenize olanak tanıyan işlevlerdir. Bu videoda, kendi mixinlerinizi nasıl tanımlayıp sonunda nasıl uygulayabileceğinizi gösterilmektedir.

Bu videoda bahsedilen seçici ile bir elemanın ebeveyn elemanına erişebilirsiniz. Bu seçici CSS'te bilindiği gibi yoktur, bu nedenle büyük bir değer sunar.

Sass, for döngülerinin kullanılmasını sağlar. Bu Sass'ta oldukça kolay çalışır ve örneğin kendi ızgara sistemini tanımlamak için kullanılabilir.

For- döngülerinin yanı sıra Sass'ta Each- ve While-döngüleri de kullanılabilir. Bu nasıl otomasyon için kullanılabilir, bu video göstermektedir.

PHP ve JavaScript gibi dillerde, if ve else kullanarak farklı olaylara tepki verebilme imkanı bulunmaktadır. Bu tarz bir özellik gerçekten Sass'ta da bulunmaktadır. Bunun nasıl kullanılabileceği, bu video'da gösterilmektedir.

Sass'ta hesap yapabilirsiniz. Bu, yazı puntolarının tanımı açısından özellikle pratiktir. Ancak ilgili operatörler sayesinde kendi özelleştirilmiş ızgara sistemini de oluşturabilirsiniz.

Tabii ki Sass'ta renkler tanımlanabilir. Ancak Sass, bu alanda geleneksel CSS'den çok daha ileri gider. İlgili fonksiyonlar sayesinde renkler örneğin çok daha kolay bir şekilde manipüle edilebilir.

Compass Framework, Sass'ın olanaklarını çok daha fazla genişletir. Bu ilk video, Compass'ı nasıl kurabileceğinizi ve kullanabileceğinizi göstermektedir.

Compass projesinin web sitesi, bu çerçeve ile çalışma konusunda merkezi bilgi kaynağıdır. CSS3 özellikleri üzerinden Compass'ın belgeleriyle nasıl çalışabileceğinizi göstereceğim.

Bir örnek, Compass ile nasıl kolaylıkla uygulanabileceğini gösteriyor. Bu serinin sonunda bir alternatif Sass çerçevesine de bir göz atılacak. Susy, ince bir Izgara-Sistemi sunuyor.