Renkler menüsündeki bu bölüm, uygulamanızı CSS/SCSS  Gelişmiş ile daha derinleştirmenizi sağlar. Bir uygulamada CSS/SCSS gelişmiş özelleştirmeyi kullanarak Şablon 6’ya dayalı bir değişiklikle ilgili bir örnek:

CSS/SCSS Gelişmiş Özelleştirme Kullanımı

CSS/SCSS Gelişmiş Özelleştirme Kullanımı
CSS/SCSS Gelişmiş Özelleştirme Kullanımı

.layout.l6 ion-scroll {
height:80% !important;}

.item{
border:node !important;
}

.homepage .scroll .item.item-avatar img {
max-width: 30px;
max-height: 30px;
}

.homepage .scroll .item.item-avatar h2{
text-align: right;
text-transform: uppercase;
font-weight: bold;
color: $bar-custom-border;
}

Bu özelleştirmelerin olmadığı sürüm(CSS/SCSS kodu eklenmemiş hali):

CSS/SCSS Gelişmiş Özelleştirme Kullanımı
CSS/SCSS Gelişmiş Özelleştirme Kullanımı

CSS Nedir?

CSS, bir sayfayı formatlandırmak ve biçimlendirmek için bir programlama dilidir (basit olanı).Basamaklı Stil Sayfası (Cascading Style Sheet) anlamına gelir ve HTML5 öğelerinin nasıl görüntülendiğini tanımlar. Daha fazlası yakında burada.

SCSS Nedir?

SCSS, CSS3’ün bir üst kümesidir. Özellikle yuvalama ve değişkenleri kullanarak klasik CSS’ye daha fazla seçenek ekler.

Örnek olarak, CSS ve SCSS’de yazılan iki stil sayfası:

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

$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şken, CSS’nin kendisinde “renk” özelliğinin değeri olarak adlandırılır, bkz:

color: $colorYellow;

Bunun gücü, CSS’inizde bir değişkeni arayabilir, ve sonra bu değişkeni kullanan tüm seçicilerin değerini değiştirmek için sadece bu değişkenin değeri üzerinde çalışmanız yeterli olur. Klasik CSS ile fark, tüm seçmenler için bir kez değiştirmek yerine, her bir seçmen için mülkün değerini değiştirmek zorunda olmanızdır.

2. Yukarıdaki iki kodu karşılaştırırsanız, her ikisinde de 3 seçici bulunur, bunlardan ikisi ana seçicinin çocuklarıdır. Kodu okumayı, yazmayı ve sürdürmeyi kolaylaştırır.

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

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

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

font-weight

“font” ebeveyn özelliğinin bir çocuk özelliği olur.

CSS’de:

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

SCSS’de:

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

Bu yazımızda ”CSS/SCSS Gelişmiş Özelleştirme Kullanımı” anlatmaya çalıştık. Makalemizi okuduğunuz için teşekkür ederiz.

No-Code Mobil Uygulama Oluşturucu, Android & iOS Mobil Uygulama Yapmaya Hazır Mısın? Cevabın evet ise https://uygulamasepeti.com/ sitemizi ziyaret edebilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.