Daha önceki bir yazımda Html ve Css ile üçgen yapımını anlatmıştım. Bu yazımda ise Scss’de mixin ve if-else yapısını kullanarak üçgen yapımını bir fonksiyon haline getireceğiz. Böylece projelerimizde istediğimiz yerlerde tek satır kod yazarak üçgenleri oluşturabileceğiz.
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:
Bu yazımda Scss deki mixin ve if-else yapılarının daha iyi anlaşılması adına küçük bir uygulama yaptık.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
Yeni bir yazımda görüşmek üzere.
){kind=link}