SASS'ta `!default` Bayrağı

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

!default bayrağını ayrıntılı olarak açıklayacak ve pratik örneklerle nasıl kullanılacağını göstereceğiz.

YouTube Video

SASS'ta !default Bayrağı

SASS'taki !default bayrağı, stil dosyalarının modülerliğini ve tekrar kullanılabilirliğini artırmak için önemli bir araçtır. Bu bayrağı kullanarak, değişkenler için varsayılan değerler belirleyebilir ve başka bir yerde tanımlanan değerlerin öncelikli olmasını sağlayabilirsiniz. Burada, !default bayrağını ayrıntılı olarak açıklayacak ve pratik örneklerle kullanımını göstereceğiz.

!default bayrağı, değişkenler için varsayılan değerler belirlemek amacıyla kullanılan SASS'a özgü bir özelliktir. Bu bayrağı ekleyerek aşağıdaki davranış sağlanır:.

• Varsayılan Değerleri Belirleme Değer, yalnızca değişken başka bir yerde tanımlı değilse atanır.

• Önceliği Kontrol Etme Eğer değişken zaten tanımlıysa, değeri üzerine yazılmaz.

Bu özellik özellikle modül ve kütüphane geliştirirken çok faydalıdır. Kullanıcılar özel değerler belirleyebilir, ancak hiçbir değer belirtilmezse varsayılanlar kullanılacaktır.

Temel Örnek

Aşağıdaki kod, !default bayrağının temel kullanımını göstermektedir.

1// _variables.scss
2$primary-color: blue !default;

• !default bayrağını kullanarak varsayılan $primary-color değişkeninin tanımlanması.

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• @use kullanarak değişkenlerin içe aktarılması ve with ile $primary-color değerinin geçersiz kılınması.

Çıktı CSS

1body {
2    background-color: red;
3}

• Bu örnekte, main.scss dosyasında $primary-color değeri red olarak ayarlandığından, _variables.scss dosyasında tanımlanan blue kullanılmayacaktır.

Bir Değişken Tanımsız Olduğunda

Eğer değişken main.scss dosyasında tanımlı değilse, varsayılan değer kullanılacaktır.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• Değişken geçersiz kılınmadan içe aktarıldığı için, _variables.scss dosyasında tanımlanan $primary-color için varsayılan blue değeri uygulanır.

Çıktı CSS

1body {
2    background-color: blue;
3}

İç İçe Modüllerde Kullanım

Modüller içinde !default kullanmak esnek özelleştirmeye imkân tanır.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• $primary-color ve $button-color değişkenlerinin !default bayrağı ile tanımlanması.

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• variables modülünü içe aktarma ve .button öğesinin rengini $button-color değişkeni ile belirtme.

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• @use ve with kullanarak $button-color değerini orange ile geçersiz kılma ve buttons modülünü kullanma.

Çıktı CSS

1.button {
2    color: orange;
3}

• Bu şekilde, modüller hem varsayılan değerler sunar hem de kullanıcı tarafından tanımlanan ayarlara saygı duyar.

Dikkat Edilmesi Gerekenler

!default bayrağını kullanırken aşağıdaki hususlara dikkat edilmelidir:.

• Uygun Varsayılan Değerlerin Seçilmesi Varsayılan değerler, yaygın kullanım senaryolarını kapsayacak şekilde seçilmelidir.

• Kaşıtlı Tasarım Tutarlı değişken adları kullanın ve diğer modüllerle çakışmalardan kaçının.

• Sıra Doğrulama !default bayrağının doğru çalışması için değişkenlerin üzerine yazılma sırası düzgün şekilde yönetilmelidir.

Pratik Senaryolar

Tema Değiştirme

Örneğin, temaları destekleyen bir kütüphane oluştururken, !default kullanarak özelleştirilebilir varsayılan değerler sağlayabilirsiniz.

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}

• Tema için $background-color ve $text-color değerlerini !default bayrağıyla tanımlama ve bunları body öğesine uygulama.

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• @use ve with kullanarak $background-color değerini geçersiz kılarak temayı özelleştirme.

Çıktı CSS

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

Yeniden Kullanılabilir Bileşenler

Yeniden kullanılabilir bir buton bileşeninde, kullanıcıların rengi değiştirmesine izin verirken varsayılan stiller belirleyebilirsiniz.

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}

• Butonlar için varsayılan arka plan ve metin renklerini !default ile tanımlama ve stilleri uygulama.

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• @use ve with kullanarak $button-bg değerini geçersiz kılarak buton rengini özelleştirme.

Çıktı CSS

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

!default Bayrağı Özeti

SASS'taki !default bayrağı, modül ve kütüphane geliştirirken güçlü bir araçtır. Tekrar kullanılabilirliği artırırken esnek özelleştirme sağlar.

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

YouTube Video