Değişken İç İçe Yerleştirme ve Parçalı Dosyalar
Yeniden kullanılabilir değerler için Sass değişkenlerini kullanın, okunabilirlik amacıyla seçicileri iç içe yerleştirin ve kodu parçalı dosyalara ayırın.
Değişken İç İçe Yerleştirme ve Parçalı Dosyalar, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. 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.
Sass Nedir?
Sass (Sözdizimsel Olarak Harika Stil Sayfaları), CSS'i değişkenler, iç içe yerleştirme, karışımlar, işlevler ve daha fazlasıyla genişleten bir CSS ön işlemcisidir. Sass dosyaları standart CSS'e derlenir.
İki Sass Sözdizimi
Sass'ın iki dosya biçimi vardır:
.scss— CSS uyumlu üst küme sözdizimi (en yaygın).sass— girintiye dayalı sözdizimi (süslü parantez veya noktalı virgül yok)
Bu kursta SCSS ele alınır.
Sass Değişkenleri
Sass değişkenlerinde $ ön eki kullanılır. Bunlar derleme zamanında çözümlenir; CSS özel özelliklerinin aksine tarayıcıda canlı değildir.
<button class="button">Sass Variables</button>
Sass Değişkenleri ile CSS Özel Özellikleri Karşılaştırması
Temel farklar:
- Sass değişkenleri: derleme zamanında çözümlenir, tarayıcıda bulunmaz, çalışma zamanında değiştirilemez
- CSS özel özellikleri: tarayıcıda canlıdır, JS tarafından değiştirilebilir, basamaklandırmayı dikkate alır
Modern yaklaşım: ikisini birlikte kullanınız. Derleme zamanı mantığı için Sass değişkenlerini, çalışma zamanı temalandırması için CSS özel özelliklerini kullanınız.
İç İçe Yerleştirme
Sass, HTML yapısını yansıtacak şekilde seçicilerin birbirinin içine yerleştirilmesine izin verir. Derlenmiş çıktı, alt öğe seçicilerini kullanır.
<div class="card">
<div class="card-title">Card title</div>
<div class="card-body">Card body text</div>
</div>
& Üst Seçici
&, üst seçiciyi belirtir ve BEM benzeri örüntülerle durum seçicilerini mümkün kılar:
<button class="button">Button</button>
<button class="button active">Active state (font-weight: bold)</button>
<button class="button--primary">BEM modifier: button--primary</button>
<span class="button__icon">🔗</span> BEM element: button__icon
İç İçe Yerleştirme Derinliği Uyarısı
3 düzeyden daha derine yerleştirmekten kaçınınız. Derin iç içe yerleştirme, gereğinden fazla özgül seçiciler üretir ve CSS'i kırılgan hâle getirir. Kendinizi derin yerleştirme yaparken buluyorsanız CSS mimarisinin büyük olasılıkla yeniden düzenlenmesi gerekir.
Sass Parçaları
Parça, adı alt çizgiyle başlayan bir Sass dosyasıdır (_card.scss). Parçalar bağımsız olarak derlenmez; başka bir dosyaya içe aktarılmaları gerekir. Böylece istenmeyen CSS çıktı dosyalarının oluşturulması önlenir.
İçe Aktarmalar için @use
Modern Sass, parçaları içe aktarmak için @use kullanır. Değişken çakışmalarını önlemek üzere ad alanı sağlar:
<h2 class="heading">Namespaced heading (t.$primary-color)</h2>
Kitaplıklar için @forward
@forward, bir modülün üyelerini yeniden dışa aktarır; böylece kitaplığınızı içe aktaran dosyalar bu üyeleri kullanabilir:
<span class="badge">Forwarded token (lib.$primary-color)</span>
Eski @import (Kullanımdan Kaldırıldı)
Daha eski @import yönergesi Dart Sass'ta kullanımdan kaldırılmıştır. Daha iyi ad alanı kullanımı ve performans için @use ile @forward'a geçiş yapınız.
Hızlı Sınama
Sass, .nav { .link { color: white; } } iç içe yerleştirmesinden hangi CSS seçicisini üretir?
Özet
Sass değişkenleri ($name) derleme zamanında çözümlenir. İç içe yerleştirme HTML yapısını yansıtır, ancak 3 düzeyden derine gitmekten kaçınınız. &, sözde sınıflar, durumlar ve BEM değiştiricileri için üst seçiciye başvurur. Parçalar (_file.scss) içe aktarılır, doğrudan derlenmez. Modern Sass modül yüklemesi için @import yerine @use kullanınız.
Sıkça Sorulan Sorular
“Değişken İç İçe Yerleştirme ve Parçalı Dosyalar” dersi ücretsiz mi?
Evet — “Değişken İç İçe Yerleştirme ve Parçalı Dosyalar” 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.
“Değişken İç İçe Yerleştirme ve Parçalı Dosyalar” dersinde ne öğreneceğim?
Yeniden kullanılabilir değerler için Sass değişkenlerini kullanın, okunabilirlik amacıyla seçicileri iç içe yerleştirin ve kodu parçalı dosyalara ayırın. 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 1. dersidir.
“Değişken İç İçe Yerleştirme ve Parçalı Dosyalar” 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ışı