SCSS Koşullu İfadeler (if-else Statements) Kullanımı | Mehsatek

Bugün programlama dillerinden aşina olduğumuz if-else yapılarının SCSS’de nasıl kullanıldığına bakacağız. SCSS’deki if-else kullanımı ile artık Css kodlarımızı yazarken koşullu ifadelerden faydalanabiliyoruz.

Kullanımı oldukça basit.

XHTML @if koşul-ifadesi { //Çalıştırılacak kodlar } @else if koşul-ifadesi { //Çalıştırılacak kodlar } @else if koşul-ifadesi { //Çalıştırılacak kodlar } @else { //Çalıştırılacak kodlar }

1234567891011121314

@ifkoşul-ifadesi{//Çalıştırılacakkodlar}@elseifkoşul-ifadesi{//Çalıştırılacakkodlar}@elseifkoşul-ifadesi{//Çalıştırılacakkodlar}@else{//Çalıştırılacakkodlar}

Normal programlama dillerindeki kullanımından tek farkı başına “@” işaretinin yazılması.

Birkaç örnek yaptığımızda daha iyi anlaşılacaktır.

İlk örneğimizde bir div etiketi oluşturalım.

Sonra bir mixin yazıp verilen ilk parametre değerini div’in genişlik ve yükseklik değeri olarak atayalım.

Div’e bir arkaplan rengi verelim.

Mixin’e verilen ikinci parametre true ise if bloğundaki kodlar çalışacak ve div’e border-radius özelliği uygulanacak.

Mixin’e verilen ikinci parametre false ise if bloğundaki kodlar çalışmayacak ve div’e border-radius özelliği uygulanmayacak.

Kodlarımızı yazmaya başlayalım.

Html Kodları

XHTML <div></div>

123	<div></div>

Scss Kodları

XHTML @mixin example-1($size, $circle){ width: $size; height: $size; background-color: red; @if $circle { border-radius: 50%; } } div{ @include example-1 (100px, false); }

123456789101112131415

@mixinexample-1($size,$circle){width:$size;height:$size;background-color:red; @if$circle{border-radius:50%;}} div{@includeexample-1(100px,false);}

Burada mixin’e birinci parametre olarak 100px verdim. Yani div’in genişlik ve yükseklik değeri 100px olacak.

İkinci parametre olarakta false değeri verdim. Yani if bloğundaki kodlar çalışmayacaktır. 

Css Çıktısı

XHTML div { width: 100px; height: 100px; background-color: red; }

1234567

div{width:100px;height:100px;background-color:red;}

Tarayıcıdaki Görünümü

Şimdi aynı örneğimizde mixin’e ikinci parametre olarak true değeri verelim.

Html Kodları

XHTML <div></div>

123	<div></div>

Scss Kodları

XHTML @mixin example-1($size, $circle){ width: $size; height: $size; background-color: red; @if $circle { border-radius: 50%; } } div{ @include example-1 (100px, true); }

123456789101112131415

@mixinexample-1($size,$circle){width:$size;height:$size;background-color:red; @if$circle{border-radius:50%;}} div{@includeexample-1(100px,true);}

Css Çıktısı

XHTML div { width: 100px; height: 100px; background-color: red; border-radius: 50%; }

12345678

div{width:100px;height:100px;background-color:red;border-radius:50%;}

Tarayıcıdaki Görünümü

Scss’de if kullanımı bu şekilde.

Başka bir örnek üzerinde de if-else kullanımına bakalım. İf-else kullanımı için en güzel örneklerden bir tanesi üçgen yapımıdır.

Kodlarımızı yazmaya başlayalım.

Html Kodları

XHTML <div id="triangle-1"></div> <div id="triangle-2"></div> <div id="triangle-3"></div> <div id="triangle-4"></div>

123456

<div id="triangle-1"></div><div id="triangle-2"></div><div id="triangle-3"></div><div id="triangle-4"></div>

Id’leri birbirinden farklı 4 div oluşturdum.

Scss Kodları

XHTML @mixin triangle ($size,$color,$direction){ height: 0; width: 0; border-color: transparent; border-style: solid; border-width: $size; @if $direction == up{ border-bottom-color: $color; } @else if $direction == right{ border-left-color: $color; } @else if $direction == down{ border-top-color: $color; } @else if $direction == left{ border-right-color: $color; } @else{ @error "Hatalı yön girdiniz.."; } } #triangle-1{ @include triangle(25px, blue, up); } #triangle-2{ @include triangle(50px, red, right); } #triangle-3{ @include triangle(75px, yellow, down); } #triangle-4{ @include triangle(100px, green, left); }

1234567891011121314151617181920212223242526272829303132333435363738394041

@mixintriangle($size,$color,$direction){height:0;width:0;border-color:transparent;border-style:solid;border-width:$size; @if$direction==up{border-bottom-color:$color;}@elseif$direction==right{border-left-color:$color;}@elseif$direction==down{border-top-color:$color;}@elseif$direction==left{border-right-color:$color;}@else{@error"Hatalı yön girdiniz..";}} #triangle-1{@includetriangle(25px,blue,up);} #triangle-2{@includetriangle(50px,red,right);} #triangle-3{@includetriangle(75px,yellow,down);} #triangle-4{@includetriangle(100px,green,left);}

Burada ise;

 ⇒  triangle adında bir mixin yani fonksiyon oluşturdum.

 ⇒  Bu fonksiyon 3 farklı parametre alıyor. Bunlar:

• Üçgenin boyutu
• Üçgenin rengi
• Üçgenin yönü

 ⇒  Daha sonra parametre olarak vermiş olduğumuz üçgenin yönüne göre if-else yapısını kullanarak üçgeni oluşturuyoruz.

 ⇒  Son olarak @include ile triangle fonksiyonu gerekli parametreleri vererek çağırıyoruz.

Css Çıktısı

XHTML #triangle-1 { height: 0; width: 0; border-color: transparent; border-style: solid; border-width: 25px; border-bottom-color: blue; } #triangle-2 { height: 0; width: 0; border-color: transparent; border-style: solid; border-width: 50px; border-left-color: red; } #triangle-3 { height: 0; width: 0; border-color: transparent; border-style: solid; border-width: 75px; border-top-color: yellow; } #triangle-4 { height: 0; width: 0; border-color: transparent; border-style: solid; border-width: 100px; border-right-color: green; }

12345678910111213141516171819202122232425262728293031323334353637

#triangle-1{height:0;width:0;border-color:transparent;border-style:solid;border-width:25px;border-bottom-color:blue;} #triangle-2{height:0;width:0;border-color:transparent;border-style:solid;border-width:50px;border-left-color:red;} #triangle-3{height:0;width:0;border-color:transparent;border-style:solid;border-width:75px;border-top-color:yellow;} #triangle-4{height:0;width:0;border-color:transparent;border-style:solid;border-width:100px;border-right-color:green;}

Gördüğünüz gibi triangle fonksiyonuna vermiş olduğumuz parametrelere göre Css kodları doğru bir şekilde oluştu.

Yazmış olduğumuz kodların tarayıcıdaki görüntüsü şu şekildedir:

Scss’de if-else kullanımı bu şekilde.

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

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

Tweet Pin It