İç içe Geçirme'de Birleştiriciler

Bu makale, iç içe geçirmede birleştiriciler hakkında açıklama yapıyor.

Bu yazıda, SASS ile iç içe geçirmede birleştiricilerin nasıl kullanılacağını açıklayacak ve adım adım anlamanıza yardımcı olacak örnek kodlar sağlayacağız.

YouTube Video

İç içe Geçirme'de Birleştiriciler

SASS'ta, ana-çocuk ilişkilerine dayalı olarak CSS seçicilerini özlü bir şekilde yazabilirsiniz, ancak descendant ve adjacent seçiciler gibi birleştiricilerin doğru bir şekilde işlenmesine özel dikkat göstermek gerekir.

İç içe Geçirmenin Temelleri

SASS'ta, çocuk seçicileri ana seçiciler içinde iç içe yazarak, CSS'te ana-çocuk ilişkilerini açık ve özlü şekilde ifade edebilirsiniz.

Örnek: Temel İç İçe Geçirme

1.nav {
2    ul {
3        li {
4            color: blue;
5        }
6    }
7}

Derlenmiş CSS

1.nav ul li {
2    color: blue;
3}

Ana Seçici Referansı (&)

SASS'taki &, mevcut ana seçiciye referans vermek için kullanılır.

Birleştiriciler ve & Kullanımı

& kullanarak esnek seçiciler oluşturabilirsiniz.

Örnek

1.card {
2    & > .title {
3        font-weight: bold;
4    }
5    & + .card {
6        margin-top: 20px;
7    }
8}

Derlenmiş CSS

1.card > .title {
2    font-weight: bold;
3}
4.card + .card {
5    margin-top: 20px;
6}

Kısaltılmış & gösterimi

SASS’ta bir seçicinin başına bir kombinator getirildiğinde, üst seçici otomatik olarak eklenir ve bu yüzden & işaretini kullanmanıza gerek yoktur.

Atlamanın mümkün olduğu durumlar

Örneğin, + .item yazdığınızda SASS bunu dahili olarak & + .item şeklinde yorumlar ve üst seçici ile birleşimi otomatik olarak oluşturur.

Örnek

1.item {
2    + .item {
3        margin-top: 10px;
4    }
5    &--hover {
6        background-color: red;
7    }
8}

Derlenmiş CSS

1.item + .item {
2  margin-top: 10px;
3}
4.item--hover {
5  background-color: red;
6}

Birleştiricilere Genel Bakış

CSS birleştiricileri, seçiciler arasındaki ilişkiyi tanımlar. Aşağıdakiler ana birleştirici tipleridir.

1. Descendant Seçici (boşluk) Descendant seçici, bir ana eleman içindeki tüm alt elemanları hedefler. Örnek: .parent .child

2. Çocuk Seçici (> ) Çocuk seçici, yalnızca doğrudan çocuk elemanları hedefler. Örnek: .parent > .child

3. Bitişik Seçici (+) Bitişik seçici, hemen ardından gelen kardeş elemanı hedefler. Örnek: .sibling1 + .sibling2

4. Genel Kardeş Seçici (~) Genel kardeş seçici, ardından gelen tüm kardeş elemanları hedefler. Örnek: .sibling1 ~ .sibling2

SASS'ta Birleştiriciler Nasıl Kullanılır

Descendant Seçici (boşluk)

SASS iç içe geçirmede, boşluk ile descendant seçici varsayılan olarak uygulanır.

Örnek

1.container {
2    .header {
3        .title {
4            font-size: 20px;
5        }
6    }
7}

Derlenmiş CSS

1.container .header .title {
2    font-size: 20px;
3}

Çocuk Seçici (> )

Çocuk seçici kullanmak istiyorsanız, SASS kodunuzda açıkça > yazın.

Örnek

1.container {
2    & > .header {
3        & > .title {
4            font-size: 20px;
5        }
6    }
7}

Derlenmiş CSS

1.container > .header > .title {
2    font-size: 20px;
3}

Bitişik Seçici (+)

Hemen ardındaki kardeş elemanı biçimlendirmek için + kullanın.

Örnek

1.item {
2    & + .item {
3        margin-top: 10px;
4    }
5}

Derlenmiş CSS

1.item + .item {
2    margin-top: 10px;
3}

Genel Kardeş Seçici (~)

Aynı düzeydeki tüm ardından gelen kardeşleri biçimlendirmek için ~ kullanın.

Örnek

1.alert {
2    & ~ .alert {
3        border-top: 1px solid red;
4    }
5}

Derlenmiş CSS

1.alert ~ .alert {
2    border-top: 1px solid red;
3}

İç içe Geçirme ile Psödo-Sınıflar ve Psödo-Elementler

Psödo-sınıflar ve psödo-elemanlar da SASS'ta kolayca yazılabilir.

Örnek

1.button {
2    &:hover {
3        background-color: blue;
4    }
5    &::after {
6        content: '';
7        display: block;
8    }
9}

Derlenmiş CSS

1.button:hover {
2    background-color: blue;
3}
4.button::after {
5    content: '';
6    display: block;
7}

Pratik Örnek

Aşağıda birden fazla birleştiriciyi bir araya getiren karmaşık bir stil örneği bulunmaktadır.

SASS Kodu

 1.menu {
 2    .menu-item {
 3        & > .submenu {
 4            display: none;
 5
 6            & > .submenu-item {
 7                font-size: 14px;
 8            }
 9        }
10        & + .menu-item {
11            margin-left: 15px;
12        }
13    }
14}

Derlenmiş CSS

1.menu .menu-item > .submenu {
2    display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5    font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8    margin-left: 15px;
9}

Özet

SASS'ta iç içe geçirme ve birleştiricileri doğru bir şekilde anlarsanız, daha özlü ve okunabilir CSS yazabilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video