Scss Nedir?
Bu makale asıl olarak devto üzerinde paylaşılmıştır. Makalenin yazarı Nero Adaware’den izin alınmıştır.
Scss, css’te olmayan özellikleri veren bir css ön işlemcisidir (css-preprocessor). Bu makalede bu özellikleri açıklayıp örnekler vereceğim.
Değişkenler(Variables)
(CSS değişkneleri desteklemekte) Scss ile kolayca değişkenler tanımlayabilirsiniz tek yapmanız gereken değişkenin önüne $ işareti koymanız ve bir css değeri atamanız yeterli.
İç İçe Koymak (Nesting)
Scss css kurallarınız iç içe koymanıza imkan verir böylece daha temiz ve kısa css yazmanıza yardım eder
Kalıtım/Miras(Inheritance)
Extend
@extend başka bir sınıftan css değerlerini miras almasını sağlar.
Aşağıda scss’in nasıl derlendiği görülmektedir.
Mixin
Kalıtım için kullanılabilecek başka bir yolda @mixin . Mixin ile yazdığınız kuralları @include ile kullanmak istediğiniz sınıf içerisinde belirtebilirsiniz.
Derlenmiş css kodlarından da görebileceğiniz gibi mixin kuralları iki ayrı css sınıf seçisine koyarken extend ise bu iki css sınıfını virgül ile ayırarak yapmaktadır.
Bir özellik daha var ki mixin’in yapıp extend’in yapamayacağı o da mixinparametre alabilmekte ve dilerseniz varsayılan değer atayabilirsiniz.
Import
Scss diğer scss dosaylarını scss dosyanıza dahil etmenize @import ile imkan verir.
Partial
Patiallar css derlenmesini istemediğiniz ama projenizde kullanmanız gereken dosyalardır. Partial bir scss dosyası oluşturmak için dosyanın önüne alt çizgi koyarak oluşturabilirsiniz “_filename.scss”. Partiallar kodunuzun modülerleşmesine yardımcı olur. Aşağıda ki örnekte renkler,butonlar ve fontlar partial olarak farlı dosaylarda tanımlanıp main.scss’e dahil edilmişlerdir.
Operatörler
Scss aritmetik operatörleri destekler. Aritmetik operatörler sadece aynı birim değerlere sahipler ise çalışabilirler ayrıca mantık ve kıyaslama operatörlerini de desteklemektedir. Operatörler için daha fazlasını bu makaleden bakabilirsiniz.
Renk Fonksiyonları
Scss renkler üzerinde işlem yapmamız için bazı fonksiyonlar verir. Onlardan birkaçı.
mix($colorX,$colorY,weight)
Mix fonksiyonu iki rengi birbirine karıştırmanız sağlar 3. parametre olan weight ise karışımda yüzde kaç ilk renkten olacağını belirtir.
lighten($color,amount)
Lighten fonksiyonu daha parlak renkler elde etmek için kullanılır. İkinci parametre olan amount ile yüzde kaç parlatılacağı belirtilir.
darken($color,amoun)
Darken fonksiyonu da lighten gibi benzerdir tek farkı daha koyu renkler elde etmemizi sağlar
opacify($color,amount)
Opacify fonksiyonu daha opak renkler elde etmek için kullanılır. İkinci parametre 0 ile 1 arasında değer alır.
transparentize($color, amount)
Transparentize fonksiyonu opacify’ın tersine opaklık değerini düşürmeye yardımıc olur.
Diğer Fonksiyonlar
str-length($string)
Parametre olarak verilen string değerin karakter sayısı geri döndürülür.
percentage($number)
Parametre olarak verilen değeri herhangi bir birim olmadan yüzde değerine çeviri
<! — görsel örnek gerekli — >
round($number)
En yakın tam sayıya yuvarlar
min($number1, $number2, $number3, …..)
Sayı kümesi içindeki minimum değeri döndürür.
random()
Rastgele bir sayı döndürü değer almaz.
quote($string)
Parametre olarak verilen string’e tırnak ekleyerek döndürür.
unquote($string)
String’den tırnakları kaldırır.
to-lower-case($string)
Bütün karakterleri küçük harfe çevirir.
to-upper-case($string)
Bütün karakterleri büyük harfe çevirir.
Döngüler
Scss sayesinde for döngülerini de kullanabiliriz.
@for döngüs işerisnde $i ile değişkenimiz tanımlanır from ile başlangıç değeri throughile son değeri belirtilir.
Koşullar
Scss’te kullanılabilen bir diğer özellik de if-else koşullarıdır.
