Yerel CSS ve Sass Yerleştirme Arasındaki Farklar

CSS, piyasaya sürülmesinden bu yana, iç içe seçicilere yönelik bir sözdizimini desteklemeyi inatla reddetti. Alternatif her zaman Sass gibi bir CSS ön işlemcisi kullanmak olmuştur. Ancak bugün iç içe yerleştirme resmi olarak yerel CSS'nin bir parçasıdır. Bu özelliği doğrudan modern tarayıcılarda deneyebilirsiniz.

Sass'tan geçiş yapıyorsanız yerel yerleştirme ile Sass yerleştirme arasındaki farkları hesaba katmanız gerekir. Her iki yerleştirme özelliği arasında bazı önemli farklar vardır ve geçiş yapıyorsanız bunların farkında olmak çok önemlidir.

Yerel CSS'de Öğe Seçicilerle "&" Kullanmanız Gerekir

CSS Nesting, değişen tarayıcı desteğiyle hâlâ taslak halindeki bir spesifikasyondur. Gibi siteleri kontrol ettiğinizden emin olun. caniuse.com güncel bilgiler için.

SCSS sözdizimini kullanarak Sass'ta görebileceğiniz iç içe yerleştirme türüne bir örnek:

.nav {
ul { display: flex; }
a { color: black; }
}

Bu CSS bloğu, bir öğe içindeki herhangi bir sırasız listenin navigasyon sınıf esnek bir sütun olarak hizalanır; bunun bir yolu Sayfada HTML öğelerinin düzenlenmesi. Ek olarak, elemanların içindeki tüm çapa bağlantı metni navigasyon sınıf siyahi olmalı.

Şimdi, yerel CSS'de bu tür bir iç içe yerleştirme geçersiz olacaktır. Bunun işe yaraması için, iç içe geçmiş öğelerin önüne ve işareti (&) işaretini eklemeniz gerekir:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

CSS iç içe yerleştirmenin ilk sürümü, tür seçicilerin iç içe geçmesine izin vermiyordu. Yakın zamanda yapılan bir değişiklik, artık "&" kullanmanıza gerek olmadığı anlamına gelir, ancak Chrome ve Safari'nin eski sürümleri henüz bu güncellenmiş sözdizimini desteklemiyor olabilir.

Şimdi, eğer bir sembolle başlayan bir seçici (örn. sınıf seçici) kullanıyorsanız sayfanın belirli bir bölümünü hedefleyinve işaretini atlayabilirsiniz. Dolayısıyla aşağıdaki sözdizimi hem yerel CSS'de hem de Sass'ta çalışır:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

Yerel CSS'de "&" Kullanarak Yeni Bir Seçici Oluşturamazsınız

Sass'ın muhtemelen sevdiğiniz özelliklerinden biri de şunun gibi bir şey yapabilme yeteneğidir:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

Bu Sass kodu aşağıdaki ham CSS'ye derlenir:

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

Yerel CSS'de "&" işaretini kullanarak yeni bir seçici oluşturamazsınız. Sass derleyicisi "&" işaretini ana öğeyle değiştirir (ör. .nav), ancak yerel CSS "&" işaretini ve ondan sonraki kısmı iki ayrı seçici olarak ele alacaktır. Sonuç olarak aynı sonucu vermeyecek bir bileşik seçici yapmaya çalışacaktır.

Ancak bu örnek yerel CSS'de çalışacaktır:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

Bu işe yarar çünkü ilk seçici aşağıdakiyle aynıdır nav.nav-listesi düz CSS'de ve ikincisi ile aynıdır nav.nav bağlantısı. "&" ile seçici arasına boşluk eklemek, yazmaya eşdeğer olacaktır nav .nav listesi.

Yerel CSS'de ve işaretini şu şekilde kullanırsanız:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

Bunu yazmakla aynı şey:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

Her ikisinin de göz önünde bulundurulduğunda bu size sürpriz gelebilir. __nav listesi Ve __nav bağlantısı içeride .nav seçici. Ancak ve işareti aslında iç içe geçmiş öğeleri ana öğenin önüne yerleştirir.

Özgünlük Farklı Olabilir

Dikkat edilmesi gereken bir diğer husus, Sass'ta olmayan ancak yerel CSS yerleştirmede meydana gelen özgüllük üzerindeki etkidir.

Diyelim ki sizde bir ve bir eleman. Aşağıdaki CSS ile bir bu öğelerin herhangi birinde serif yazı tipi kullanılacaktır:

#main, article {
h2 {
font-family: serif;
 }
}

Yukarıdaki Sass kodunun derlenmiş versiyonu aşağıdaki gibidir:

#mainh2,
articleh2 {
font-family: serif;
}

Ancak yerel CSS'deki aynı iç içe geçme sözdizimi, etkili bir şekilde aşağıdaki gibi farklı bir sonuç üretecektir:

:is(#main, article) h2 {
font-family: serif;
}

dır-dir() seçici, özgüllük kurallarını Sass yerleştirmeden biraz farklı şekilde ele alır. Temel olarak aşağıdakilerin özgüllüğü:dır-dir() sağlanan bağımsız değişkenler listesindeki en spesifik öğeye otomatik olarak yükseltilir.

Elementlerin Sırası Seçilen Elementi Değiştirebilir

Yerel CSS'de iç içe yerleştirme, seçicinin gerçekte ne anlama geldiğini tamamen değiştirebilir (yani tamamen farklı bir öğe seçer).

Örneğin aşağıdaki HTML'yi düşünün:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

Ve aşağıdaki CSS:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

Sass'ı CSS derleyicisi olarak kullanırsanız sonuç budur:

Şimdi HTML bloğunda, eğer sınıfı ile koyu tema onun içinde eylem çağrısı, seçiciyi bozar (Sass modunda). Ancak normal CSS'ye geçtiğinizde (yani CSS ön işlemcisi olmadığında), stiller çalışmaya devam edecektir.

Bunun nedeni, :dır-dir() kaputun altında çalışıyor. Böylece yukarıdaki iç içe geçmiş CSS, aşağıdaki düz CSS'ye derlenir:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

Bu bir belirtiyor .başlık bu ikisinin soyundan geliyor .karanlık tema Ve .eylem çağrısı. Ancak bunların sırası pek önemli değil. Sürece .başlık soyundan geliyor .eylem çağrısı Ve .karanlık temaher iki sırayla da çalışır.

Bu uç bir durumdur ve çok sık karşılaşacağınız bir durum değildir. Ama anlamak :dır-dir() seçicinin temel işlevi, CSS'de iç içe yerleştirmenin nasıl çalıştığı konusunda uzmanlaşmanıza yardımcı olabilir. Bu aynı zamanda CSS'nizde hata ayıklama daha kolay.

React'te Sass'ın Nasıl Kullanılacağını Öğrenin

Sass, CSS'ye derlendiği için onu hemen hemen her kullanıcı arayüzü çerçevesiyle kullanabilirsiniz. CSS ön işlemcisini Vue, Preact, Svelte ve tabii ki React projelerine yükleyebilirsiniz. Tüm bu çerçeveler için Sass'ın kurulum süreci de oldukça basittir.

React'ta Sass kullanmanın en büyük avantajı değişkenleri ve karışımları kullanarak temiz, yeniden kullanılabilir stiller yazmanıza olanak sağlamasıdır. Bir React geliştiricisi olarak Sass'ın nasıl kullanılacağını bilmek, daha temiz, daha verimli kod yazmanıza ve genel olarak daha iyi bir geliştirici olmanıza yardımcı olacaktır.