SCSS Variables (Değişken) Kullanımı

SCSS derslerimize Variables yani Değişkenler ile başlıyoruz. Değişkenleri kullanarak Css kodlarımızı dinamik bir hale getirebiliriz.

İlk olarak değişken kullanmanın bize ne gibi faydalar sağlayacağından bahsedelim. Sonrasında ise SCSS’de değişken kullanımı nasıl yapılıyor ona bakalım.

Bunu küçük bir örnek üzerinde göstermek istiyorum. Örneğin aşağıdaki gibi 3 farklı buton tasarlayalım.

Html Kodları

<button id="btn-1">Button-1</button>
<button id="btn-2">Button-2</button>
<button id="btn-3">Button-3</button>

<button id="btn-1">Button-1</button>

<button id="btn-2">Button-2</button>

<button id="btn-3">Button-3</button>

Css Kodları

#btn-1{
color:white;
background-color: cornflowerblue;
border: none;
width: 80px;
height: 40px;
}
#btn-2{
color:white;
background-color: cornflowerblue;
border: none;
width: 80px;
height: 80px;
border-radius: 50%;
}
#btn-3{
color:white;
background-color: cornflowerblue;
border: none;
width: 80px;
height: 80px;
}

#btn-1{

color:white;

background-color: cornflowerblue;

border: none;

width: 80px;

height: 40px;

}

#btn-2{

color:white;

background-color: cornflowerblue;

border: none;

width: 80px;

height: 80px;

border-radius: 50%;

}

#btn-3{

color:white;

background-color: cornflowerblue;

border: none;

width: 80px;

height: 80px;

}

Butonların Görünümü

Gördüğünüz gibi 3 butonunda yazı rengine beyaz rengini, arkaplan rengine mavinin bir tonunu verdim.

Şimdi bu butonların yazı rengini veya arkaplan rengini değiştirmek istediğimizi varsayalım. Örneğin arkaplan rengini sarı yapalım.

Bunun için 3 butonun arkaplan rengini tek tek sarı yapmamız gerekiyor.

Vermiş olduğum örnek basit bir örnek olduğu için kolay durabilir.

Varsayalım ki bir web sitesi tasarlıyorsunuz. Web sitenizde kullandığınız ana renginiz mavi diyelim. Bildiğiniz gibi bazen Css dosyaları binlerce satır koddan oluşabiliyor.

Dolayısıyla bu Css dosyanızda ana renginiz olan mavi rengini onlarca defa kullanmış olacaksınız. İlerleyen zamanlarda sitenin ana rengini değiştirmek istediğinizde gidip Css dosyasından tek tek değiştirmeye çalışırsanız, bu hem çok zahmetli hem de gereksiz zaman kaybına yol açacaktır.

Peki bunun bir çözümü var mı?

Evet.

SCSS ile bu rengi bir değişkene atadığımızı varsayalım. Tüm web sitesini tamamladıktan sonra yine sitenin ana rengini değiştirmek istiyorsak yapmamız gereken tek şey gidip değişkenin değerini yeni renk ile değiştirmek.

İşte bu kadar basit.

Biraz önce yukarıda vermiş olduğum örneği şimdi de SCSS ile kodlayalım.

Html Kodları

<button id="btn-1">Button-1</button>
<button id="btn-2">Button-2</button>
<button id="btn-3">Button-3</button>

<button id="btn-1">Button-1</button>

<button id="btn-2">Button-2</button>

<button id="btn-3">Button-3</button>

SCSS kodlarını yazmadan önce değişkenlerin nasıl tanımlandığını öğrenelim.

⇒ SCSS’de değişken kullanımı için ilk olarak “$” işaretini yazıyoruz.

⇒ Sonrasında programlama dillerinde olduğu gibi istediğimiz bir değişken adını yazıyoruz.

⇒ Sonrasında “:” işaretini koyup ardından değişkene vermek istediğimiz değeri yazıyoruz.

⇒ Son olarak “;” koyarak bitiriyoruz.

Örneğin;

$yazi-rengi: white; 
$arkaplan-rengi:cornflowerblue;

$yazi-rengi: white;

$arkaplan-rengi:cornflowerblue;

Tanımlamış olduğumuz bu değişkenleri kodlarımızı yazarken şu şekilde kullanıyoruz:

Örneğin bir butonun color ve background-color özelliklerine bu değişkenleri atayalım.

button{
color:$yazi-rengi;
background-color:$arkaplan-rengi;
}

button{

color:$yazi-rengi;

background-color:$arkaplan-rengi;

}

SCSS’de değişken tanımlama ve kullanma bu şekilde.

Şimdi yukarıdaki örneğimiz için SCSS kodlarımızı yazalım.

Scss Kodları

$yazi-rengi: white;
$arkaplan-rengi:cornflowerblue;
#btn-1{
color:$yazi-rengi;
background-color: $arkaplan-rengi;
border: none;
width: 80px;
height: 40px;
}
#btn-2{
color:$yazi-rengi;
background-color: $arkaplan-rengi;
border: none;
width: 80px;
height: 80px;
border-radius: 50%;
}
#btn-3{
color:$yazi-rengi;
background-color: $arkaplan-rengi;
border: none;
width: 80px;
height: 80px;
}

$yazi-rengi: white;

$arkaplan-rengi:cornflowerblue;

#btn-1{

color:$yazi-rengi;

background-color: $arkaplan-rengi;

border: none;

width: 80px;

height: 40px;

}

#btn-2{

color:$yazi-rengi;

background-color: $arkaplan-rengi;

border: none;

width: 80px;

height: 80px;

border-radius: 50%;

}

#btn-3{

color:$yazi-rengi;

background-color: $arkaplan-rengi;

border: none;

width: 80px;

height: 80px;

}

Kodlarımız bu şekilde tamamlandı. Artık butonların yazı rengini veya arkaplan rengini değiştirmek istediğimizde sadece değişken değerini değiştirmemiz yeterli olacaktır.

Örneğin butonların yazı rengini siyah, arkaplan rengini sarı yapalım.

Scss Kodları

$yazi-rengi: black;
$arkaplan-rengi:yellow;
#btn-1{
color:$yazi-rengi;
background-color: $arkaplan-rengi;
border: none;
width: 80px;
height: 40px;
}
#btn-2{
color:$yazi-rengi;
background-color: $arkaplan-rengi;
border: none;
width: 80px;
height: 80px;
border-radius: 50%;
}
#btn-3{
color:$yazi-rengi;
background-color: $arkaplan-rengi;
border: none;
width: 80px;
height: 80px;
}

$yazi-rengi: black;

$arkaplan-rengi:yellow;

#btn-1{

color:$yazi-rengi;

background-color: $arkaplan-rengi;

border: none;

width: 80px;

height: 40px;

}

#btn-2{

color:$yazi-rengi;

background-color: $arkaplan-rengi;

border: none;

width: 80px;

height: 80px;

border-radius: 50%;

}

#btn-3{

color:$yazi-rengi;

background-color: $arkaplan-rengi;

border: none;

width: 80px;

height: 80px;

}

Butonların Görünümü

Gördüğünüz gibi tüm butonlarda tek seferde değişikliği sağlamış olduk.

Konuyu anlatırken hep renkler üzerinden anlattım.

Tabiki değişkenleri sadece renklerde kullanmıyoruz. Bu değişkenlere pixel değerleri de atayabiliriz, string değerler de.

Son olarak bir de pixel değeri vereceğimiz bir örnek yapıp konuyu tamamlayalım.

$width:80px;
$height:80px;
$border-radius:50%;
btn{ 
width: $width; 
height: $height; 
border-radius: $border-radius; 
}

$width:80px;

$height:80px;

$border-radius:50%;

btn{

width: $width;

height: $height;

border-radius: $border-radius;

}

Gördüğünüz gibi kullanımında herhangi bir değişiklik yok. Yine aynı şekilde kullanıyoruz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

SCSS Variables (Değişken) Kullanımı

Yazar Hakkında

Yorum Yazın

Benzer Yazılar

Yazar Hakkında

Yorum Yazın