0Pricing
CSS Academy · Ders

Sass İşlevleri ve Denetim Akışı

Sass'ın yerleşik işlevleriyle ve @if, @each ve @for yönergeleriyle dinamik CSS mantığı yazın.

Sass İşlevleri ve Denetim Akışı, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. 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 Yerleşik İşlevleri

Sass; renk işleme, matematik, dize işlemleri ve daha fazlası için birçok yerleşik işlev sağlar. Bunlar derleme zamanında çalışır.

<div class="darker">darken($base, 15%)</div>
  <div class="lighter">lighten($base, 15%)</div>
  <div class="faded">transparentize($base, 0.5)</div>
  <div class="mixed">mix($base, white, 60%)</div>

Renk İşlevleri

Temel Sass renk işlevleri:

  • darken($color, $amount)
  • lighten($color, $amount)
  • saturate($color, $amount)
  • mix($color1, $color2, $weight)
  • rgba($color, $alpha)
  • color.scale($color, $lightness: 20%)

@function ile Özel İşlevler

Değer döndüren (CSS kuralları döndürmeyen) yeniden kullanılabilir işlevler tanımlayınız:

<h2 class="heading">Heading (2rem)</h2>
  <p class="body">Body text (1.125rem)</p>

@if @else Denetim Akışı

Değişken değerlerine göre koşullu olarak CSS üretiniz:

<p class="text-large">Large text variant</p>
  <p class="text-small">Small text variant</p>
  <p class="text-default">Default text variant</p>

@each Döngüsü

Birden çok kural oluşturmak için bir liste veya eşleme üzerinde yineleme yapınız:

<button class="btn-primary">Primary</button>
  <button class="btn-danger">Danger</button>
  <button class="btn-success">Success</button>

@for Döngüsü

Bir değer aralığı için CSS oluşturunuz:

<div class="col-1">col-1 (20%)</div>
  <div class="col-2">col-2 (40%)</div>
  <div class="col-3">col-3 (60%)</div>
  <div class="col-4">col-4 (80%)</div>
  <div class="col-5">col-5 (100%)</div>

@while Döngüsü

Bir koşul doğru olduğu sürece döngü oluşturur. Ölçülü kullanınız; çoğu durumu @each ve @for karşılar:

<div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>

Sass Eşlemeleri

Eşlemeler, Sass'taki anahtar-değer veri yapılarıdır:

<div class="box">Responsive box (resize wider than 768px to see color change)</div>

@error @warn @debug

Sass üç tanılama işlevi sağlar:

  • @error: bir iletiyle derlemeyi durdurur
  • @warn: durdurmadan bir uyarıyı günlük kaydına yazar
  • @debug: geliştirme sırasında bir değeri günlük kaydına yazar

Ara Değerleme #{...}

Değişken değerlerini seçicilere, özellik adlarına veya medya sorgularına eklemek için #{$variable} kullanınız:

<p class="element">Interpolated property (#{$property})</p>

Hızlı Kontrol

Bir Sass @mixin ile Sass @function arasındaki fark nedir?

Özet

Sass'ın yerleşik renk işlevleri (koyulaştırma, açma, karıştırma), derleme zamanında renkleri değiştirmenizi sağlar. Özel bir @function, hesaplanmış bir değer döndürür. @if/@else, koşullu çıktı ekler. @each, listeler ve eşlemeler üzerinde yinelenir. @for, sayı aralıkları üzerinde yinelenir. Bu özellikler, en az tekrarla güçlü ve DRY stil sayfaları oluşturmanızı sağlar.

Sıkça Sorulan Sorular

“Sass İşlevleri ve Denetim Akışı” dersi ücretsiz mi?

Evet — “Sass İşlevleri ve Denetim Akışı” 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.

“Sass İşlevleri ve Denetim Akışı” dersinde ne öğreneceğim?

Sass'ın yerleşik işlevleriyle ve @if, @each ve @for yönergeleriyle dinamik CSS mantığı yazı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 4. dersidir.

“Sass İşlevleri ve Denetim Akışı” 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

  1. Değişken İç İçe Yerleştirme ve Parçalı Dosyalar
  2. Mixin'ler ve İçermeler
  3. Extend ve Yer Tutucu Seçiciler
  4. Sass İşlevleri ve Denetim Akışı
← CSS Academy Sayfasına Dön