SASS @content Kullanımı

Responsive tasarım yaparken yazılan kodları kısaltmak amacıyla ve responsive kodlarını oluştururken çok kolaylık sağlayan bir yapıdan bahsetmek istiyorum.

@mixin desktop {
  @media only screen and (max-width: 1440px) and ( min-width: 1200px ){
    @content
  }
}

Yukarıda ki oluşturduğumuz yapıyı kullanabilmemiz için de;

html {
  font-family: 'Gilroy', sans-serif;
  @include desktop {
    display: none;
  }
}

@include içerisinde yazdığımız her yeni bir kod bloğu @content olarak @mixin içerisinde kullanabiliyoruz.

Responsive kod için sayfaları tekrardan derlerken ciddi anlamda pratiklik sağlıyor. Umarım sizinde işinize yarar, bol kodlamalı günler 🙂