SASS Değişken Tanımlama (Sass Variables)

Tarhi : 15-09-2024 12:13:52 | Yazar : ÇAĞLAR BOSTANCI

Selam, bu yazımızda sass ile değişken tanımlamayı öğrenim bir kaç örnek uygulama yapacağız. Sizlerinde şahit olduğu gibi sass gün geçtikçe bir çok uygulamada kullanım kolaylığı sağlıyor. Bu sebepten bir çok projede style şablonlarının daha iyi düzenlenebilmesi için sass tercih ediliyor. Aynı zamanda bootstrap gibi bir çok sitil kütüphanesini daha etkin ve kişiselleştirerek kullanmamızı sağlıyor.

Sass ile kullanılan değikenler aşağıda listelenmiştir.

strings
numbers
colors
booleans
lists
Map
nulls

Şimdi örnek bir değişken tanımlayıp sass ile yazalım.

$style :sans-serif;
$size  : 32px;
$color :goldenrod;
$back-color : black;

h1{
    font-style:$style;
    font-size: $size;
    color: $color;
    background-color: $back-color;
}

$style :sans-serif;

$size : 32px;

$color :goldenrod;

$back-color : black;

h1{

font-style:$style;

font-size: $size;

color: $color;

background-color: $back-color;

}

Sass’da değişkenler $ ile başlar. Daha sonra $color:goldenrod ikinokta koyarak değiken değeri atanır. Yukardaki örnekte h1 etiketinin renk,boy,arkaplan ve tipini değişkenler oluşturduk ve h1 bloğunda tanımladı.

Sass Değiken Kapsamı (Sass Variables Scope)

Sass ile değişkenler tanımlandıkları bloklar içersinde localdirler. Global olanlar ise küme parantez blokları dışında tanımlananlardır.

$color:green;
h1{
    $color: blue;
    color:blue;
}
p{
    color:$color
}

$color:green;

h1{

$color: blue;

color:blue;

}

color:$color

}

Bu örnekte h1 etiketi mavi olurken p etiketinin metin rengi yeşil olmuştur. Çünkü h1 blokları içerisinde $color değişkeni local olarak tanımlanmıştır. Eğer $color değikenini local değilde global olarak değiştirmek istersek !global tanımlanmalıdır. Aşağıdaki örnekte belirtilmiştir.

$color:green;
h1{
    $color: blue !global;
    color:blue;
}
p{
    color:$color
}

$color:green;

h1{

$color: blue !global;

color:blue;

}

color:$color

}

Bu örnekte h1 ve p etiketlerinin metin rengi mavi olmuştur.

Aşağıdaki örnekte diğer değişken tipleri bir arada kullanılarak h1 etiketina tanılanmıştır. Dikkatlice inceleyelim.

@use "sass:list"; // list sınıf eklendi
@use "sass:map"; // map sınıfı eklendi

$color:rgba(204, 102, 153,.5);  // color bir değer atandı.
$before : ">>"; // string bir değer atandı.
$div : 3; // Numeric bir değer atandı
$size : 12px 25px 56px; // list bir değişken oluşturuldu;
$font_style : ("font-1":sans-serif,"font-2":'Times New Roman',"font-3":Arial); // Map bir değer oluşturuldu.
$durum : true ; //boolean bir değer tanımlandı.
$borderWidth : &; //Null bir değiken tanımlandı
h1{
    font-family: map.get($font_style,"font-1") ; // font stili map değer içerisinden sans-serif olarak belirlendi
    background-color: $color; // metin rengi belirlendi.
    width: calc(100% / $div); //h1 etiket genişliği genişliğin 3/1 olarak hesaplandı.
    font-size: list.nth($size,3); //list değer içinde üçüncü index olan 56px değeri verildi.
    font-weight: if($durum,400,900); // font genişliği 400 olarak belirlendi
    border-bottom: if($borderWidth == null,5px,10px) solid #333; //border genişliği 5px olarak belirlendi.
}
h1::before{
    content:$before; // h1 etiketinin before değerine string ">>" değeri verildi
}

@use "sass:list"; // list sınıf eklendi

@use "sass:map"; // map sınıfı eklendi

$color:rgba(204, 102, 153,.5); // color bir değer atandı.

$before : ">>"; // string bir değer atandı.

$div : 3; // Numeric bir değer atandı

$size : 12px 25px 56px; // list bir değişken oluşturuldu;

$font_style : ("font-1":sans-serif,"font-2":'Times New Roman',"font-3":Arial); // Map bir değer oluşturuldu.

$durum : true ; //boolean bir değer tanımlandı.

$borderWidth : &; //Null bir değiken tanımlandı

h1{

font-family: map.get($font_style,"font-1") ; // font stili map değer içerisinden sans-serif olarak belirlendi

background-color: $color; // metin rengi belirlendi.

width: calc(100% / $div); //h1 etiket genişliği genişliğin 3/1 olarak hesaplandı.

font-size: list.nth($size,3); //list değer içinde üçüncü index olan 56px değeri verildi.

font-weight: if($durum,400,900); // font genişliği 400 olarak belirlendi

border-bottom: if($borderWidth == null,5px,10px) solid #333; //border genişliği 5px olarak belirlendi.

}

h1::before{

content:$before; // h1 etiketinin before değerine string ">>" değeri verildi

}

İlgili

SASS

SASS Değişken Tanımlama (Sass Variables)

Hemen Başla

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

SASS Değişken Tanımlama (Sass Variables)