SCSS Mixin ve Include Kullanımı

SCSS derslerimize mixin ve include kullanımı ile devam ediyoruz.

Web sayfalarımızı kodlarken Css3 özelliklerini çok sık kullanıyoruz. Örneğin transition, transform, animation vb..

Bildiğiniz gibi bu Css3 özellikleri eski tarayıcılarda problem oluşturabiliyor. Bu uyumluluk problemlerini çözmek için Css3 özelliklerinin bazılarını ön-ekler ile birlikte kullanıyoruz. Örneğin transform özelliğini kullanırken tüm tarayıcılarda düzgün bir şekilde çalışması için şöyle yazıyoruz.

Bir özelliği kullanmak için 5 satır kod yazıyoruz.

Eğer tasarımlarınızda bu tarz Css3 özelliklerini çok kullanıyorsanız, her kullandığınız yerde bu ön-ekler ile birlikte kullanmalısınız. Doğal olarak bunları bu şekilde yazmak ciddi zaman kaybına yol açacaktır.

İşte SCSS’de bunu mixin kullanarak çözebiliyoruz. Mixinler tıpkı fonksiyonlar gibidir. Yani bir defa mixin oluşturup kod içerisinde defalarda bu mixini çağırabiliyoruz.

Yine fonksiyonlarda olduğu gibi parametre alan veya almayan şekilde yazabiliyoruz.

Mixinleri şu şekilde kullanıyoruz:

 ⇒  @mixin yazıyoruz.

 ⇒  Sonrasında mixine vermek istediğimiz adı yazıyoruz.

 ⇒  Sonrasında “()” yazıyoruz. Eğer parametre alan mixin oluşturacaksanız burada parametreleri yazmanız gerekiyor.

 ⇒  Sonrasında süslü parantezler ({}) arasında kodlarımızı yazıyoruz.

 ⇒  Son olarak oluşturduğumuz bu mixini çağırmak istediğimizde @include yazıp devamında vermiş olduğumuz mixin adını yazıyoruz.

 ⇒  Eğer parametre alan bir mixin ise burada gerekli parametreleri veriyoruz.

Şimdi parametre alan ve almayan mixin kullanımını örneklendirelim.

1 – Parametre Almayan mixin Kullanımı

Sadece boş bir div etiketi oluşturuyorum.

Scss Kodları

Tarayıcıdaki Çıktısı

scss-mixin-kullanimi-1

2 – Parametre Alan mixin Kullanımı

Yine boş bir div etiketi oluşturuyorum.

Scss Kodları

Tarayıcıdaki Çıktısı

scss-mixin-kullanimi-2

Daha iyi anlaşılması adına, son olarak Css3 özelliklerinden olan transition ve transform özelliklerini kullanarak bir örnek uygulama yapalım.

Uygulamamızın son hali şu şekilde olacak.

scss-mixin-ve-include-kullanimi

Mavi kutunun üzerine fare ile geldiğimizde 3 saniyede,

 ⇒  Kutuyu 300px sağa 150px aşağı kaydıracağız.

 ⇒  Kutunun rengini maviden yeşil tonuna döndüreceğiz.

 ⇒  Kutuyu 360 derece döndüreceğiz.

 ⇒  Kutuyu 4.5 kat büyülteceğiz.

Artık kodlarımızı yazmaya başlayabiliriz.

Html Kodları

Scss Kodları

Css Çıktısı

SCSS’de mixin ve include kullanımı bu şekilde.

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

Şu yazılar da ilginizi çekebilir.

Css Transition Kullanımı

Css Transform Kullanımı

Css Animation Kullanı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