Mixin'ler ve İçermeler
@mixin ile yeniden kullanılabilir stil blokları oluşturun ve bunları @include ile istediğiniz yerde ekleyin.
Mixin'ler ve İçermeler, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Karışım Nedir?
Sass'ta karışım, yeniden kullanılabilir bir CSS bildirimleri bloğudur. Normal bir sınıfın aksine parametre kabul edebilir; bu da onu kopyala-yapıştır yönteminden daha esnek kılar. @mixin ile tanımlanır, @include ile kullanılır.
Temel Karışım
Parametresiz bir karışım, yalnızca yeniden kullanılabilir bir bloktur:
<div class="hero">Centered hero content</div>
Argümanlı Karışım
Çıktısını özelleştirmek için bir karışıma değerler geçiriniz:
<button class="btn-primary">Primary</button>
<button class="btn-danger">Danger</button>
Varsayılan Argümanlar
Karışım argümanları için varsayılan değerler belirleyerek bunları isteğe bağlı hâle getiriniz:
<div class="card">Card with default shadow</div>
<div class="modal">Modal with custom shadow</div>
Anahtar Sözcüklü Argümanlar
Açıklık sağlamak için karışım argümanlarını adlarıyla geçiriniz:
<div class="tooltip">Tooltip</div>
@content — Bloklu Karışım
Karışımlar, @content kullanarak bir içerik bloğu kabul edebilir. Dahil edilen blok, @content ifadesinin bulunduğu yere eklenir:
<a href="#" class="link">Hover or focus this link</a>
<a href="#" class="link-demo">Same link, hover state shown statically</a>
Duyarlı Tasarım Karışımı
Medya sorguları için yaygın bir karışım:
<div class="sidebar">Sidebar (280px wide on desktop ≥ 1024px)</div>
Tipografi Karışımı
Tutarlı bir yazı ölçeği için metin stili karışımı:
<h2 class="heading">Heading text style</h2>
<p class="body">Body text style</p>
Karışım ve İşlev Karşılaştırması
Karışımlar CSS bildirimleri üretir; işlevler bir değer döndürür. Birden çok CSS kuralı üretmek istiyorsanız karışım, hesaplanmış tek bir değere ihtiyacınız varsa işlev kullanınız.
Karışımların Aşırı Kullanımından Kaçınma
Çok fazla karışım, hata ayıklaması zor olan soyut dolaylılık katmanları oluşturur. Bir örüntü 3 veya daha fazla kez yeniden kullanılıyorsa karışım oluşturunuz. Tek kullanımlık stiller için CSS'i doğrudan yazınız.
Hızlı Sınama
Sass karışımı tanımında @content ne amaçla kullanılır?
Özet
Karışımları @mixin ile tanımlayınız ve @include ile kullanınız. Karışımlar, isteğe bağlı varsayılanlarla parametre kabul eder. @content, çağıranların CSS bloklarını karışımın içine eklemesini sağlar ve medya sorgusu yardımcıları gibi sarmalayıcı örüntüler oluşturmayı mümkün kılar. Soyutlama yükünden kaçınmak için karışımları yalnızca birden çok kez yeniden kullanılan örüntüler için oluşturunuz.
Sıkça Sorulan Sorular
“Mixin'ler ve İçermeler” dersi ücretsiz mi?
Evet — “Mixin'ler ve İçermeler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Mixin'ler ve İçermeler” dersinde ne öğreneceğim?
@mixin ile yeniden kullanılabilir stil blokları oluşturun ve bunları @include ile istediğiniz yerde ekleyin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Mixin'ler ve İçermeler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Değişken İç İçe Yerleştirme ve Parçalı Dosyalar
- Mixin'ler ve İçermeler
- Extend ve Yer Tutucu Seçiciler
- Sass İşlevleri ve Denetim Akışı