SASS Mixin

CSS3 ile gelen özelliklerin bazı tarayıcılarda ön ek alarak kullanılması zahmetli ve uzun CSS kodlarının yazılmasına neden olur.

Farklı tarayıcı ön eklerinin tekrar kullanımını azaltmak için SASS @mixin kullanabiliriz.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Oluşturduğumuz mixin’i kullanmak için @include ile sınıfımıza dahil ediyoruz.

.kutu { @include border-radius(10px); }

CSS3 linear-gradient özelliği mixin örneği;

@mixin linearGradient($top, $bottom) {
    background: $top;
    background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

Örnekteki mixin için gerekli olan parametreleri yazdıktan sonra kullanabiliriz.

.kutu { @include linearGradient(#cccccc, #666666); }

Ön ek alarak desteklenen özellikler için bir defa mixin tanımladıktan sonra istediğimiz kadar kullanabiliriz.

SASS Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. celal dedi ki:

    Sass yazılarını okudum sade anlaşılarbilir bir döküman olmus teşekkür ederim .

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir