CSS Değişken Kullanımı

CSS Değişkenler Nedir?

CSS değişkenleri, front-end geliştiriciler için büyük avantajlar sağlar. Front-end geliştiriciler bu değişkenler sayesinde, daha okunabilir ve daha fazla esneklik sunan kodlar yazabilir.

CSS’de değişkenleri kullanmak için birçok neden var. En önemli nedeni ise, CSS kodlarındaki tekrarlanmayı azaltıyor olmasıdır. Aynı zamanda daha esneklik kazandırıyor.

CSS Değişken Tanımlama

CSS’de değişken tanımlamak için “:root” seçicisini kullanmamız gerekir.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">:root{

}

İki parantez arasına değişkenlerimizi tanımlayabiliriz. Örneğin aşağıdaki gibi değerler atayabiliriz.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">:root{
<span>    --orange: #ff503f;</span>
    --fontprimary: 25px;
}

Örneğin bu şekilde iki değer atadım.

Oluşturduğum değişkenlere ise, “var(–değişkenadi)” ile ulaşabiliriz.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">:root{
<span>    --orange: #ff503f;</span>
    --fontprimary: 25px;

.aciklama {

<span>    color: var(--orange);</span>
    font-size: var(--fontpriamary);
}<br>

Değişkenlerimizi bu şekilde kullanabiliriz. Aynı şekilde bu değişkenlere Javascript ile erişebiliyoruz.