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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@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 } |
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ı
|
1 2 3 |
<div></div> |
Scss Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@mixin example-1($size, $circle){ width: $size; height: $size; background-color: red; @if $circle { border-radius: 50%; } } div{ @include example-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ı
|
1 2 3 4 5 6 7 |
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ı
|
1 2 3 |
<div></div> |
Scss Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@mixin example-1($size, $circle){ width: $size; height: $size; background-color: red; @if $circle { border-radius: 50%; } } div{ @include example-1 (100px, true); } |
Css Çıktısı
|
1 2 3 4 5 6 7 8 |
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ı
|
1 2 3 4 5 6 |
<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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
@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); } |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
#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.
 Kullanımı){kind=link}