Gelişmiş Özelleştirme SCSS nedir, nasıl kullanılır?

Bu bölüm nedir?

Renkler menüsündeki bu bölüm, uygulamanızı CSS / SCSS ile daha derinlemesine özelleştirebilmenizi sağlar. Aşağıda, bir uygulamada CSS / SCSS ile gelişmiş özelleştirmeyi kullanarak Yerleşim 6’ya dayalı bir değişikliğe ilişkin bir örnek verilmiştir:

CSS nedir?

CSS, bir sayfayı biçimlendirmek ve şekillendirmek için kullanılan bir programlama dalıdır (basit bir dildir). Basamaklı Stil Sayfası’nın kısaltmasıdır ve HTML5 öğelerinin nasıl görüntüleneceğini tanımlar. Daha fazla bilgi burada.

SCSS Nedir?

SCSS, CSS3’ün bir üst kümesidir. Klasik CSS’ye, özellikle iç içe yerleştirme ve değişkenler kullanarak daha fazla seçenek katmaktadır.

Örnek olarak CSS ve SCSS’de yazılmış iki stil sayfası bulunmaktadır:

CSS Kodu: 

#body {
margin: 0;
border: 1px solid red;
}
#body p {
font-size: 13px;
font-weight: bold;
color: yellow;
}
#body h {
text-transform: capitalize;
}

Aynı şeyin SCSS kodunda yazılmış versiyonu:

$colorYellow: yellow;
#body {
margin: 0;
border: 1px solid $colorYellow;
p {
color: $colorYellow;
font: {
size: 13px;
weight: bold;
}
}
h {
text-transform;
}
}

İkisi arasındaki fark nedir?

1. Yukarıdaki koda bakarsanız, bir değişken olduğunu görebilirsiniz

$colorYellow: yellow;

Ve bu değişkene CSS’nin kendisinde “renk” özelliği değeri denir, bkz:

color: $colorYellow;

Bunun gücü, CSS’nizde bir değişken çağırabilir ve bu değişkeni kullanan tüm seçicilerin değerini değiştirmek için yalnızca bu değişkenin değerinde çalışmanız gerekir. Klasik CSS ile arasındaki fark, tüm seçiciler için bir kez değiştirmeden, özelliklerin değerini her seçici için değiştirmek zorunda kalacağınızdır.

2. Yukarıdaki iki kodu karşılaştırırsanız, her ikisinde de 3 seçici bulunur; ikisi ikisi ana seçicinin çocuklarıdır. SCSS’de çocukların ebeveyni iç içe yerleştirilebilir. Kodun okunması, yazılması ve bakımını kolaylaştırır. Yani CSS’de yazmak yerine:

#body {
margin: 0;
}
#body p {
font-size: 12px;
}

SCSS’de şunu yazardınız:

#body {
margin: 0;
p {
color: $colorYellow;
font-size: 12px;
}
}

3. Ebeveyn ve çocuk özelliklerinde bölünebilen bazı özellikler için aynı olduğunu görebilirsiniz. Örneğin, SCSS’de

font-weight

Ebeveyn mülkiyetinin “yazı tipi” bir alt mülkü haline gelir.

CSS’de:

#body p {
font-size: 13px;
font-weight: bold;
}

SCSS’de:

#body p {
font {
size: 13px;
weight: bold;
}
}