SASS'ta `!global` Bayrağı

Bu makale, SASS'taki !global bayrağını açıklar.

!global bayrağının detaylı mekanizmasını, kullanım örneklerini ve dikkat edilmesi gerekenleri açıklayacağız.

YouTube Video

SASS'ta !global Bayrağı

SASS'ta !global bayrağı, değişkenlerin kapsamını yönetmek için kullanılır. Bu bayrağı doğru anlayıp uygun şekilde kullanarak, kodunuzda beklenmeyen davranışları önleyebilir ve sürdürülebilirliği artırabilirsiniz.

!global Bayrağı Nedir?

Normalde, SASS değişkenlerinin bir kapsamı vardır. Varsayılan olarak, değişkenler yalnızca tanımlandıkları kapsamda geçerlidir. Başka bir deyişle, bir değişken bir fonksiyon veya mixin içinde tanımlanmışsa, o kapsamın dışında erişilemez.

Ancak, !global bayrağını kullanarak değişkeni doğrudan küresel kapsama atayabilirsiniz. Bu sayede değişkenler kapsamlar arasında paylaşılabilir.

!global Bayrağı Olmadan

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue; // Local variable (does not overwrite the global variable)
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // red
10}

• Bu kodda, $color küresel kapsamda tanımlandığı için .change'in color özelliği red olarak kalır.

Çıktı CSS

1.change {
2    color: red;
3}

!global Bayrağı ile

Aynı örneğe !global bayrağını ekleyelim.

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue !global; // Overwrite the global variable
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // blue
10}

• Bu durumda, !global bayrağı belirtildiği için $color değişkeninin değeri küresel kapsamda güncellenir. Sonuç olarak, .change sınıfının color özelliği blue olur.

Çıktı CSS

1.change {
2    color: blue;
3}

Kullanımda Dikkat Edilmesi Gerekenler

• Küresel Kapsamın Kirlenmesi !global bayrağının aşırı kullanımı, beklenmeyen kapsam çatışmalarına ve küresel kapsamın kirlenmesine yol açabilir. Bu durum özellikle büyük projelerde önemlidir ve bu bayrağın aşırı kullanılmasından kaçınılmalıdır.

• İstenmeyen Değerin Üzerine Yazılması !global bayrağı kullanıldığında, aynı ada sahip değişkenler başka yerlerde istemeden üzerine yazılabilir. Bu nedenle, değişkenlerin tutarlı ve açık bir şekilde adlandırılması gereklidir.

Pratik Örnek

Aşağıda !global bayrağının doğru kullanımıyla ilgili bir örnek bulunmaktadır.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4@mixin set-theme($primary, $secondary) {
 5    $primary-color: $primary !global;
 6    $secondary-color: $secondary !global;
 7}
 8
 9.light-theme {
10    @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14    @include set-theme(#333333, #666666);
15}
16
17body {
18    background-color: $primary-color;
19    color: $secondary-color;
20}

• Bu kodda, set-theme mixini temaları dinamik olarak değiştirmek için kullanılabilir. Her tema için global değişkenler güncellendiğinden, birden fazla tema esnek bir şekilde yönetilebilir.

Çıktı CSS

1body {
2    background-color: #333333;
3    color: #666666;
4}

Yaygın Hatalar ve Önlemler

Bayrağı Unutmak

!global eklemeyi unutursanız, değişkenler amaçlanan kapsamda güncellenmeyebilir. Gerekli olduğunda mutlaka bayrağı açıkça ekleyin.

1@mixin update-color() {
2    $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6    $color: green !global; // Overwrite the global variable
7}

Global Kapsama Aşırı Bağımlılık

!global bayrağına fazla güvenmek, kodun hata ayıklamasını ve bakımını zorlaştırabilir. Kullanımı minimumda tutulmalıdır.

Özet

SASS'taki !global bayrağı belirli durumlarda çok kullanışlıdır, ancak dikkatli kullanılmalıdır. Değişken kapsamını açıkça anlayarak ve global kapsamı doğru şekilde yöneterek, oldukça sürdürülebilir SASS kodu oluşturabilirsiniz.

Dikkat edilmesi gereken temel noktalar şunlardır:.

1. Değişkenler varsayılan olarak kapsamlarına bağlıdır.

2. !global bayrağı, global kapsamda değişkenleri güncellemenizi sağlar.

3. Bayrak kullanımını minimumda tutun ve mümkün olduğunca istenmeyen üzerine yazmalardan kaçının.

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

YouTube Video