SASS `@at-root`

Bu makale SASS'ın @at-root yönergesini açıklar.

Adım adım, @at-root'un temel kullanımından ileri düzey örneklere kadar her şeyi ele alacağız.

YouTube Video

SASS @at-root hakkında

@at-root, SASS tarafından sağlanan ve iç içe geçmiş seçicileri veya özellikleri mevcut iç içelikten üst kapsama taşımak için kullanılan bir yönergedir. Bu özelliği kullanarak iç içe geçme derinliğini kontrol edebilir ve amaçlanan CSS'yi daha verimli oluşturabilirsiniz.

@at-root'un temel kullanımı

SASS'ın iç içe yazımı kodu daha okunabilir kılar, ancak aşırı derin iç içelik istenmeyen CSS'in üretilmesine yol açabilir. @at-root kullanarak belirli kod bloklarını iç içe yapıdan hariç tutabilirsiniz.

Temel Sözdizimi

1@at-root {
2  // Code to be output at the parent (root) scope
3}

Örnek Kullanım

1.nav {
2  color: blue;
3  @at-root {
4    .nav-item {
5      color: red;
6    }
7  }
8}

Derlenmiş CSS

1.nav {
2  color: blue;
3}
4.nav-item {
5  color: red;
6}

• @at-root sayesinde .nav-item, .nav'ın dışına yazdırılır.

İç içe seçicilerde @at-root

Derin iç içelikte bile, @at-root kullanarak belirli seçicileri kök düzeye taşıyabilirsiniz. Bu sayede karmaşık yapılarda bile kontrollü CSS çıktısı üretebilirsiniz.

Örnek Kullanım

1.card {
2  background: white;
3  .card-header {
4    color: black;
5    @at-root .card-title {
6      font-size: 20px;
7    }
8  }
9}

Derlenmiş CSS

1.card {
2  background: white;
3}
4.card .card-header {
5  color: black;
6}
7.card-title {
8  font-size: 20px;
9}

• @at-root kullanılarak .card-title, .card-header'ın dışına yazdırılır.

Argümanlarla @at-root

Argümanlar belirterek @at-root'u daha esnek biçimde kontrol edebilirsiniz.

without argümanı

without argümanını kullandığınızda çıktı, belirtilen kapsamları yok sayar. Başka bir deyişle, üst kuralları veya medya sorgularını kaldırabilirsiniz.

Örnek Kullanım

1.nav {
2  @media (min-width: 768px) {
3    &__item {
4      @at-root (without: media) {
5        color: red;
6      }
7    }
8  }
9}

Derlenmiş CSS

1.nav__item {
2  color: red;
3}

• Bu durumda @at-root (without: media), medya sorgusu kapsamını hariç tutar ve .nav__item kökte yazdırılır.

with argümanı

with kullanmak, çıktıda yalnızca belirtilen kapsamların kalmasını sağlar. Belirli kapsamları korurken köke çıktı almak istediğinizde kullanışlıdır.

Örnek Kullanım

 1.nav {
 2  &__item {
 3    @media (min-width: 768px) {
 4      @at-root (with: media) {
 5        &-large {
 6          font-size: 18px;
 7        }
 8      }
 9    }
10  }
11}

Derlenmiş CSS

1@media (min-width: 768px) {
2  .nav__item-large {
3    font-size: 18px;
4  }
5}

• @at-root (with: media), medya sorgusu yapısını korurken seçiciyi köke taşır.

Birden çok koşul belirtme

Boşluklarla ayırarak aynı anda birden çok kapsam belirtebilirsiniz.

Örnek Kullanım

1.wrapper {
2  @media (min-width: 600px) {
3    @at-root (without: rule media) {
4      .global-style {
5        color: green;
6      }
7    }
8  }
9}

Derlenmiş CSS

1.global-style {
2  color: green;
3}

• Bu örnekte hem rule (normal seçiciler) hem de media (medya sorguları) hariç tutulur; bu nedenle .global-style herhangi bir kapsama ait değildir ve tamamen kök düzeyinde yazdırılır. Bu, karmaşık iç içelik içinde bile kasıtlı olarak global stiller tanımlamak istediğinizde kullanışlıdır.

Medya sorgularıyla birleştirme

@at-root kullanarak, medya sorguları içindeyken stilleri kök düzeyine çıkarabilirsiniz. Bu, duyarlı tasarımı bileşen düzeyinde tanımlamanıza olanak tanır.

Örnek Kullanım

1.container {
2  @media (min-width: 768px) {
3    @at-root {
4      .container-large {
5        width: 80%;
6      }
7    }
8  }
9}

Derlenmiş CSS

1.container-large {
2  width: 80%;
3}

• @at-root kullanarak, medya sorgularının içinden de kök düzeyinde stiller çıktısı alabilirsiniz. Bu, her kırılma noktası için bağımsız global stiller tanımlamayı kolaylaştırır.

@at-root için kullanım örnekleri

Belirli koşullarda stilleri kök düzeyinde üretmek istediğinizde @at-root kullanışlıdır. Özellikle bileşenler içinde medya sorguları veya temaya özgü stillerle çalışırken faydalıdır.

Bileşenleri ve temaları ayırma

@at-root kullanarak, medya sorgularının içinden bile bağımsız global sınıflar üretebilirsiniz. Bu, tema ve durumları bileşen bazında düzenlemeyi kolaylaştırır.

Örnek Kullanım

 1.card {
 2  background: white;
 3  color: black;
 4
 5  @media (prefers-color-scheme: dark) {
 6    @at-root (with: media) {
 7      .card-dark {
 8        background: #222;
 9        color: white;
10      }
11    }
12  }
13}

Derlenmiş CSS

 1.card {
 2  background: white;
 3  color: black;
 4}
 5
 6@media (prefers-color-scheme: dark) {
 7  .card-dark {
 8    background: #222;
 9    color: white;
10  }
11}

• Bu örnekte, .card içinde koyu tema için stiller tanımlanırken, @at-root ayrı bir .card-dark sınıfı üretir. Bu, farklı temalar arasında sınıfları esnek şekilde değiştirmenizi sağlar.

Notlar

@at-root kullanırken aşağıdaki noktaları aklınızda bulundurun.

1. Aşırı kullanımdan kaçının @at-root güçlüdür, ancak aşırı kullanımı iç içe yapınızın amacını belirsizleştirebilir.

2. Amacı netleştirin @at-root'u neden kullandığınız hakkında yorum bırakmak, diğer geliştiricilerin anlamasını kolaylaştırır.

3. Kapsam tutarlılığına dikkat edin Çıktıyı köke taşımak stil bağımlılıklarını değiştirebilir. Hangi öğelere uygulandığı konusunda net olun.

4. Diğer SASS özellikleriyle birleştirin @at-root'u @mixin ve @function ile birleştirmek daha esnek bir CSS tasarımı sağlar.

Özet

{^ i18n_speak @at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}

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

YouTube Video