<\/span><\/h3>\nMixin’ler, SCSS’in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biridir ve tekrar eden CSS kod bloklar\u0131n\u0131 paketleyip yeniden kullanman\u0131z\u0131 sa\u011flar. Bir dizi stil kural\u0131n\u0131 bir mixin i\u00e7inde tan\u0131mlayarak, bu kurallara ihtiya\u00e7 duydu\u011funuz herhangi bir se\u00e7icide tek bir sat\u0131rla \u00e7a\u011f\u0131rabilirsiniz. Bu, DRY (Don’t Repeat Yourself – Kendini Tekrar Etme) prensibini uygulamak i\u00e7in m\u00fckemmel bir yoldur.<\/p>\n
@mixin ile Kural Tan\u0131mlama<\/h4>\n
Bir mixin olu\u015fturmak i\u00e7in @mixin<\/code> anahtar kelimesi ve ard\u0131ndan bir isim kullan\u0131l\u0131r. \u0130\u00e7ine, yeniden kullan\u0131labilir stil kurallar\u0131 yaz\u0131l\u0131r. \u00d6rne\u011fin, flexbox kullanarak bir elementi ortalamak i\u00e7in s\u0131k\u00e7a kullan\u0131lan kodlar\u0131 bir mixin’e d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz: @mixin center-flex { display: flex; justify-content: center; align-items: center; }<\/code><\/p>\n@include ile Kural\u0131 \u00c7a\u011f\u0131rma<\/h4>\n
Tan\u0131mlanan bir mixin’i kullanmak i\u00e7in, stil blo\u011funun i\u00e7inde @include<\/code> anahtar kelimesi ve ard\u0131ndan mixin’in ad\u0131 yaz\u0131l\u0131r. Yukar\u0131daki \u00f6rnekte tan\u0131mlanan mixin’i \u00e7a\u011f\u0131rmak i\u00e7in: .container { @include center-flex; }<\/code>. Derleme s\u0131ras\u0131nda, @include<\/code> sat\u0131r\u0131n\u0131n yerine mixin i\u00e7indeki t\u00fcm CSS kurallar\u0131 eklenir.<\/p>\nParametre Alan Dinamik Mixin’ler<\/h4>\n
Mixin’ler, t\u0131pk\u0131 fonksiyonlar gibi parametreler (arg\u00fcmanlar) alarak daha dinamik ve esnek hale getirilebilir. Bu sayede, ayn\u0131 mixin’i farkl\u0131 de\u011ferlerle kullanarak \u00e7e\u015fitli sonu\u00e7lar elde edebilirsiniz. \u00d6rne\u011fin, kenarl\u0131k (border) olu\u015fturmak i\u00e7in renk ve kal\u0131nl\u0131k de\u011ferlerini parametre olarak alan bir mixin yazabilirsiniz: @mixin border-style($width, $color) { border: $width solid $color; }<\/code>. Bu mixin, @include border-style(2px, #ff0000);<\/code> \u015feklinde farkl\u0131 de\u011ferlerle \u00e7a\u011fr\u0131labilir.<\/p>\n