HAZIRLAYAN: RİFAT ALICI

Scss, css’te olmayan özellikleri veren bir css ön işlemcisidir (css-preprocessor).

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 mixin parametre 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ı dosyalarda 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.

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 

|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.