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.
|
1 2 3 4 5 6 7 |
-moz-transform: skew(20deg); -ms-transform: skew(20deg); -o-transform: skew(20deg); -webkit-transform: skew(20deg); transform: skew(20deg); |
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.
|
1 2 3 |
<div></div> |
Scss Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@mixin b-radius(){ border-radius: 50%; } div { width: 200px; height: 200px; background-color: red; @include b-radius(); } |
Tarayıcıdaki Çıktısı
2 – Parametre Alan mixin Kullanımı
Yine boş bir div etiketi oluşturuyorum.
|
1 2 3 |
<div></div> |
Scss Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@mixin b-radius($value1, $value2){ border-top-left-radius: $value1; border-bottom-right-radius: $value2; } div { width: 200px; height: 200px; background-color: red; @include b-radius(80px,80px); } |
Tarayıcıdaki Çıktısı
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.
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ı
|
1 2 3 |
<div></div> |
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 |
@mixin transition($property){ -webkit-transition: $property; transition: $property; } @mixin transform($property){ -webkit-transform: $property; transform: $property; } div { width: 30px; height: 30px; background-color: cornflowerblue; @include transition(all 3s); &:hover{ @include transform(translate(300px, 150px) rotate(360deg) scale(4.5)); background-color:greenyellow; border-radius:50%; } } |
Css Çıktısı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
div { width: 30px; height: 30px; background-color: cornflowerblue; -webkit-transition: all 3s; transition: all 3s; } div:hover { -webkit-transform: translate(300px, 150px) rotate(360deg) scale(4.5); transform: translate(300px, 150px) rotate(360deg) scale(4.5); background-color: greenyellow; border-radius: 50%; } |
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.
Yeni bir yazımda görüşmek üzere.
