Html ve SCSS ile Üçgen Yapma Fonksiyonu (Mixin ve if-else Uygulaması)

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ı

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

Scss Kodları

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ı

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:

html-ve-scss-ile-ucgen-yapimi

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.

Html ve Css ile Üçgen Yapımı

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

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link