SASS'ta Karışımlar (Mixinler)

Bu makale SASS'taki karışımları (mixinleri) açıklar.

SASS'taki karışımları pratik örneklerle açıklayacağız.

YouTube Video

SASS'ta Karışımlar (Mixinler)

Genel Bakış – Mixin Nedir?

Mixin'ler, sıkça kullanılan stil özellikleri setlerini yeniden kullanılabilir fonksiyonlar olarak tanımlamanıza ve ihtiyaç duyduğunuz her yerde çağırmanıza olanak tanıyan bir mekanizmadır. CSS sınıflarınızı ve birden çok özelliğinizi DRY (Kendini Tekrarlama) prensibine uygun tutmak için çok faydalıdırlar.

Örnek: En basit mixin

Aşağıda border-radius ve box-shadow birlikte kullanan basit bir mixin örneği bulunmaktadır. Bu mixini çağırarak aynı görünümü birden fazla elemana uygulayabilirsiniz.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8.card {
 9  @include card-style;
10  padding: 1rem;
11}

• Bu mixinle, stilleri doğrudan tekrar etmenize gerek kalmaz.
• Çağırmak için sadece bir satır yeterlidir: @include card-style;.

Parametreli (Argümanlı) Mixinler

Mixinler tıpkı fonksiyonlar gibi argüman kabul edebilirler. Bu, aynı mantıkla görünümü değiştirmenizi sağlar. Sıradaki örnekte renk bir parametre olarak alınmaktadır.

 1// Mixin with parameters: accepts a color and optional radius
 2@mixin colored-box($bg-color, $radius: 4px) {
 3  background-color: $bg-color;
 4  border-radius: $radius;
 5  padding: 0.75rem;
 6}
 7
 8.box-primary {
 9  @include colored-box(#007acc);
10}
11
12.box-custom {
13  @include colored-box(#ffcc00, 12px);
14}

• Varsayılan bir değer sağlayarak, bir argüman eksik bırakıldığında davranışı kontrol edebilirsiniz.
• Bu örnekte varsayılan yarıçap kullanılır ve sadece arka plan rengi geçersiz kılınır.

Değişken sayıda argümanın (...) kullanıldığı durumlar

Birden fazla değer almak istediğinizde değişken sayıda argüman ($args...) kullanabilirsiniz. Bu, yardımcı sınıflar oluşturmak veya alternatif (fallback) listeleri geçirmek için faydalıdır.

Birden çok font ailesi veya gölge değeri geçirmek gerektiğinde işe yarar.

1// Mixin that accepts variable arguments and forwards them to box-shadow
2@mixin multi-shadow($shadows...) {
3  box-shadow: $shadows;
4}
5
6.panel {
7  @include multi-shadow(0 2px 4px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06));
8}

• Çağıran tarafta, virgülle ayrılmış şekilde birden fazla gölge değeri gönderebilirsiniz.
• Böylece aynı mixini hem basit hem de karmaşık gölgeler için kullanabilirsiniz.

@content ile mixinler — Bir Blok Almak

@content kullanılarak, bir mixin çağıran taraftan bir stil bloğu alabilir. Bu, mixinin ortak bir çerçeve (wrapper) sağlamasına, çağıran tarafın ise iç detayları belirtmesine olanak tanır.

 1// Mixin that sets up a responsive container and yields to caller via @content
 2@mixin responsive-container($max-width: 1200px) {
 3  margin-left: auto;
 4  margin-right: auto;
 5  padding-left: 1rem;
 6  padding-right: 1rem;
 7  max-width: $max-width;
 8
 9  @content; // place where caller's styles are inserted
10}
11
12.header {
13  @include responsive-container(1000px) {
14    display: flex;
15    align-items: center;
16    justify-content: space-between;
17  }
18}

• Çağıran tarafta, @include içerisine bir blok ekleyerek içine stiller yerleştirebilirsiniz.
• Bu yöntem, grid, kart ve form gibi düzen çerçeveleri için faydalıdır.

Koşul ve Döngü Kullanarak Gelişmiş Mixinler

Mixinler içerisinde @if ve @for gibi kontrol yapıları kullanılabilir. Bunları yardımcı sınıf üretimini otomatikleştirmek ve duyarlı (responsive) ayarları gruplamak için kullanabilirsiniz.

Aşağıda yardımcı sınıf genişliklerini otomatik olarak üreten bir örnek bulunmaktadır.

 1@use 'sass:math';
 2
 3// Mixin that generates width utility classes from a list of fractions
 4@mixin generate-widths($fractions) {
 5  @each $name, $fraction in $fractions {
 6    .w-#{$name} {
 7      width: math.percentage($fraction);
 8    }
 9  }
10}
11
12$widths: (
13  '1-4': 0.25,
14  '1-3': 0.3333,
15  '1-2': 0.5,
16  '3-4': 0.75
17);
18
19@include generate-widths($widths);

• Oluşturmak istediğiniz kesirlerin haritasını çağıran tarafa ileterek, ilgili yardımcı sınıfları otomatik olarak hepsini birden oluşturabilirsiniz.
• Bu yaklaşımı kullanmak, tasarımınızda tutarlılığı korurken manuel stil tanımlarını azaltma avantajı sağlar.

Mixinler ve Yer Tutucular (%placeholder)

Mixin'ler bir dizi özelliği doğrudan eklerken, stilleri miras alırken @extend ile placeholder'lar kullanılır. Mixin'ler bazı durumlarda yinelenen CSS oluşturabilir, ancak @extend belirli durumlarda daha kompakt CSS üretebilir.

Her yöntemin oluşturduğu CSS’in amacı ve farklarını anlayarak, en uygun yaklaşımı seçebileceksiniz.

 1// Placeholder example (for comparison)
 2%btn-base {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn-primary {
 9  @extend %btn-base;
10  background: #007acc;
11  color: #fff;
12}
13
14.btn-secondary {
15  @extend %btn-base;
16  background: #e0e0e0;
17}

• @extend ile bir placeholder'ı genişlettiğinizde, birden fazla seçici tek bir kurala birleştirilebilir ve bu daha kompakt CSS ile sonuçlanır.
• Öte yandan, mixin'ler özellikleri ihtiyaç duyulan yere doğrudan eklediğinden esneklik sunar ve istenmeyen seçici birleştirmelerinin önüne geçilmesine yardımcı olur.

Yaygın Pratik Kalıplar (Duyarlı Tasarım, Tarayıcı Ön Eklentileri vb.)

Uygulamada, tarayıcı ön ekleri veya duyarlı özellikler gibi ortak işlemleri mixinler içine koymak faydalıdır. Aşağıda, transform ve ön ek özelliklerini birleştiren bir örnek bulunmaktadır. Tarayıcı uyumluluğu için kodu merkezileştirerek bakımı kolaylaştırabilirsiniz.

 1// Mixin for transform with vendor prefixes
 2@mixin transform($value) {
 3  -webkit-transform: $value;
 4  -ms-transform: $value;
 5  transform: $value;
 6}
 7
 8.icon-rotate {
 9  @include transform(rotate(45deg));
10}

• Kullanımı basittir ve @include transform(rotate(10deg)); gibi her yerde kullanabilirsiniz.
• İleride önekler gereksiz hale gelse bile, mixin'i güncelleyerek değişikliği tüm kod tabanınıza yansıtmanız mümkün olduğu için bakım daha kolay hale gelir.

Pratik Örnek: Kartlar ve Butonların Birleşimi

Aşağıda, kart içinde kullanılan buton stillerinin bir mixin ile birleştirildiği ve tema rengine göre değiştirilebildiği bir örnek verilmiştir.

Bu, sık kullanılan 'kart + buton' kalıbını mixinlerle düzenler.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8// Mixin for transform with vendor prefixes
 9@mixin transform($value) {
10  -webkit-transform: $value;
11  -ms-transform: $value;
12  transform: $value;
13}
14
15// Button mixin with theme and size parameters
16@mixin btn($bg, $color: #fff, $padding: 0.5rem 1rem) {
17  display: inline-block;
18  padding: $padding;
19  background: $bg;
20  color: $color;
21  border-radius: 6px;
22  text-decoration: none;
23  cursor: pointer;
24  @include transform(translateY(0)); // reuse earlier transform mixin
25}
26
27// Card mixin that accepts inner button styling via @content
28@mixin card($gap: 1rem) {
29  @include card-style; // reuse earlier card-style mixin
30  padding: $gap;
31  @content;
32}
33
34.card-feature {
35  @include card {
36    .title { font-size: 1.125rem; margin-bottom: 0.5rem; }
37    .cta {
38      @include btn(#007acc);
39    }
40  }
41}
42
43.card-warning {
44  @include card {
45    .title { font-weight: bold; }
46    .cta {
47      @include btn(#ff6600);
48    }
49  }
50}

• Bu mixinleri kullanarak bileşenleri daha öz bir şekilde yazabilirsiniz.

Performans ve Oluşturulan CSS'e Dikkat Edin

Mixinler her çağrıldıklarında özellik ekledikleri için, aynı kural için sıkça @include kullanmak CSS dosyanızın çok büyümesine yol açabilir. Gerekirse mixinleri yer tutucular ve bileşen tasarımıyla birleştirerek optimize edebilirsiniz.

Ayrıca, aşağıdaki önlemler de etkilidir.

• Sıkça kullanılan stiller, yeniden kullanılabilirlik için sınıflara dönüştürülmelidir.
• Ortak desenler @content kullanılarak gruplandırılmalıdır.
• Karmaşık yardımcı programların oluşturulması yalnızca derleme sırasında yapılmalıdır.

Daha Kolay Hata Ayıklama İpuçları

Mixin kullanırken, hata ayıklama ve sürdürülebilirliği artıracak yöntemler geliştirmek de önemlidir. Açık değişken adları kullanıp mixin'lerin içine açıklamalar ekleyerek, kodu daha sonra gözden geçirmenin anlaşılması daha kolay olacaktır. Ayrıca, işlevsellik karmaşık hale gelirse, mixini daha küçük birimlere bölmek test etmeyi kolaylaştırır ve sürdürülebilirliği artırır.

Ayrıca, kaynak haritalarını etkinleştirmek, hangi mixinin hangi CSS'i ürettiğini kolayca takip etmenizi sağlar ve sorunları izole etmeyi kolaylaştırır.

Aşağıda, dokümantasyon yorumlarıyla anlaşılması kolay bir mixin örneği verilmiştir.

1// Example: readable mixin with clear param names and comments
2/// Adds a subtle focus ring for accessibility
3/// $color - ring color
4/// $size - thickness of the ring
5@mixin focus-ring($color: #007acc, $size: 2px) {
6  outline: none;
7  box-shadow: 0 0 0 $size rgba(blue($color), 0.15);
8}

• Bu şekilde düzenlenmiş dokümantasyon yorumlarına sahip olmak, ekip içinde paylaşımı ve anlaşılmayı kolaylaştırır.
• SASS dokümantasyon yorumları uyumlu araçlarla otomatik olarak çıkarılabildiğinden, stil rehberleri gibi belgeler oluşturmak için de faydalıdır.

Özet

Mixinler, sık kullanılan stilleri tekrar kullanılmak üzere gruplayabildiği için kod tekrarını azaltır ve bakımını kolaylaştırır. Ayrıca, birden fazla seçici aynı kuralları paylaştığında, yalnızca mixinleri değil, @extend (yer tutucular) kullanmayı da düşünün. Ek olarak, @content düzen çerçeveleri ile içeriğin esnek şekilde ayrılmasını sağlasa da, aşırı @include kullanımı şişkin CSS dosyalarına yol açabilir, bu yüzden dikkatli olunmalıdır. Genel ve kolayca genişletilebilir mixinler tasarlamak için argümanlardan, varsayılan değerlerden ve değişken sayıda argümanlardan tam anlamıyla faydalanmak önemlidir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video