Sass (SCSS) Eğitimi

Eğitim Hakkında

Sass söziminden modül sistemine, mixin ve fonksiyonlardan 7-1 mimarisine eksiksiz akış

Sass (Syntactically Awesome Style Sheets) Eğitimi, CSS'i değişken, iç içe yazım, modül ve fonksiyonla güçlendiren ön işlemci dilini uygulamalı öğretir. Katılımcılar partial ve @use ile modüler yapı kurar, mixin ve @function ile yeniden kullanılabilir stil üretir; @if, @for, @each gibi denetim yapılarıyla dinamik CSS yazar. Program map ve list veri yapıları, sass:math ve sass:color modülleri, 7-1 mimarisi, tema ve responsive mixin desenleriyle tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; gerçek bir arayüz projesinin stil katmanı Sass ile sıfırdan modüler biçimde kurulur.

Seviye

Orta Seviye — CSS bilenler için değişken, mixin, fonksiyon ve modül ile ölçeklenebilir Sass mimarisi

Öğrenme Metodu

Her modülde yazılan Sass kodu derlenip tarayıcıda görülür; değişken, mixin ve fonksiyonlar gerçek bir bileşen kütüphanesine uygulanır.

Neden Bu Eğitim?

🎯Tekrarı azaltın

Değişken, mixin ve fonksiyonlarla aynı stili bir kez tanımlayıp her yerde kullanarak kod tekrarını ve bakım yükünü belirgin azaltırsınız.

🧩Modüler mimari

Partial ve @use ile stili parçalara bölerek büyük projelerde bile düzenli, okunabilir ve genişletilebilir bir CSS mimarisi kurarsınız.

🎨Dinamik tema

Map ve renk fonksiyonlarıyla tema değerlerini merkezden yöneterek karanlık mod ve marka varyasyonlarını tek noktadan üretebilirsiniz.

Anahtar Konular

sass eğitimiscss kursucss ön işlemci eğitimisass mixin fonksiyonscss eğitimicss mimarisi eğitimi7-1 sass mimarisiön yüz geliştirme eğitimisass tema yönetimimodüler css

“Sass, CSS'i bir stil dosyasından gerçek bir mimariye dönüştürür; bu eğitim o mimariyi kurmanın yolunu uygulamalı gösterir.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam hazırlığı

1

CSS bilgisi

Seçiciler, kutu modeli, flex ve temel CSS özellikleri bilinmelidir; Sass bu temelin üzerine kurulur.

2

Terminal kullanımı

Komut satırından dosya çalıştırma ve paket kurulumu temel düzeyde bilinmeli; derleme adımları terminalden yürütülür.

3

Node ve Dart Sass

Node.js kurulu olmalı; Dart Sass derleyicisi ya da bir build aracı projede çalışabilir durumda bulunmalıdır.

4

Kod editörü

VS Code gibi bir editör ve Sass eklentisi faydalı olur; canlı derleme ile değişiklikler anında görülür.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Sass derleme akışını kurar, SCSS söz dizimini öğrenir, değişkenler ve iç içe yazımla temiz ve okunabilir stil yazmaya başlar.

Modül 1

Sass'a Giriş ve Derleme

Sass, SCSS ve CSS arasındaki fark ve ilişki
Dart Sass kurulumu ve sass komutu ile derleme
İzleme modu ile otomatik yeniden derleme
Kaynak haritası ve çıktı biçimi seçenekleri
SCSS ve girintili söz dizimi karşılaştırması
Build aracına Sass derleme adımı ekleme

Modül 2

Değişkenler ve Veri Tipleri

$ ile değişken tanımı ve kullanımı
Sayı, string, renk ve boolean tipleri
null ve varsayılan değer !default kullanımı
Değişken kapsamı ve !global davranışı
Renk ve ölçü değerlerinin merkezi yönetimi
İç değişken ile CSS custom property farkı

Modül 3

İç İçe Yazım ve Seçiciler

Seçicilerin iç içe yazılması ve okunabilirlik
& ile üst seçiciye referans verme
BEM yapısını & ile üretme deseni
Özellik iç içe yazımı ile grup tanımı
Pseudo sınıf ve durumların iç içe yazımı
Aşırı iç içe yazımın özgüllük riski

Modül 4

Operatörler ve Hesaplama

Matematik operatörleri ve birim davranışı
math.div ile bölme ve çıktı kontrolü
Karşılaştırma ve mantıksal operatörler
String birleştirme ve interpolasyon #{}
Renk üzerinde işlem ve karıştırma
calc ile Sass değerlerini birleştirme

Günün hedefiKatılımcı mixin ve fonksiyonlarla parametreli ve yeniden kullanılabilir stil üretir, @extend ve placeholder ile ortak kuralları verimli biçimde paylaşmayı öğrenir.

Modül 1

Mixin ile Stil Paylaşımı

@mixin tanımı ve @include ile çağırma
Parametre ve varsayılan değer tanımlama
Değişken sayıda argüman ve arglist kullanımı
@content ile mixin'e blok aktarma
Tarayıcı ön ek üreten mixin örneği
Mixin kütüphanesinin dosya olarak düzenlenmesi

Modül 2

Fonksiyonlar ve Dönüş Değeri

@function ile değer döndüren fonksiyon yazma
@return ifadesi ve mantık ayrımı
px değerini rem'e çeviren fonksiyon
Fonksiyon ile mixin arasındaki tercih
Argüman doğrulama ve hata üretme @error
@warn ve @debug ile geliştirme çıktısı

Modül 3

@extend ve Placeholder

@extend ile seçici arası kural paylaşımı
%placeholder ile çıktısız temel sınıf
@extend ile mixin arasındaki çıktı farkı
Özgüllük ve seçici zinciri yan etkileri
Ortak buton ve mesaj stillerinde kullanım
@extend yerine mixin tercih kriterleri

Modül 4

Responsive Mixin Desenleri

Breakpoint değerlerini map olarak tutma
respond-to mixin'i ile medya sorgusu üretme
Mobil öncelikli min-width yaklaşımı
@content ile duyarlı blokların yazımı
Tipografi ölçeğini mixin ile üretme
Yeniden kullanılabilir yerleşim mixin'leri

Günün hedefiKatılımcı denetim yapılarıyla dinamik CSS üretir, map ve list veri yapılarıyla tema ve ölçek değerlerini yönetir ve döngülerle yardımcı sınıflar oluşturur.

Modül 1

Koşul ve Döngüler

@if, @else if ve @else ile koşullu stil
@for ile sayısal aralıkta döngü
@each ile list ve map üzerinde dolaşma
@while ile koşula bağlı yineleme
Döngü ile ızgara sütun sınıfları üretme
Koşullu mixin ile tema değişkeni seçimi

Modül 2

Map (Harita) Veri Yapısı

Map tanımı ve anahtar-değer yapısı
map.get ile anahtara karşılık değere erişim
map.merge ile iki map'i birleştirme
map.has-key ile anahtar denetimi
Tema renklerini map ile merkezden yönetme
İç içe map ile yapılandırma tablosu

Modül 3

List ve Yardımcı Sınıflar

List tanımı ve virgül veya boşluk ayracı
list.nth ile sıradaki öğeye erişim
list.length ve list.append kullanımı
@each ile boşluk yardımcı sınıfları üretme
Renk paletinden otomatik sınıf üretimi
Üretilen yardımcı sınıfların adlandırılması

Modül 4

Yerleşik Modüller

sass:math ile yuvarlama ve bölme
sass:color ile açma, koyulaştırma ve karıştırma
sass:string ile metin işleme fonksiyonları
sass:map ile map yardımcı fonksiyonları
sass:list ile list dönüşümleri
@use ile modül ve ad alanı kullanımı

Günün hedefiKatılımcı 7-1 klasör mimarisiyle stili ölçeklenebilir biçimde düzenler, @use ile modül sistemini kurar, tema değiştirir ve üretim için optimize edilmiş CSS üretir.

Modül 1

7-1 Klasör Mimarisi

abstracts, base ve components klasör ayrımı
layout, pages ve themes katmanları
Tek main.scss giriş dosyası yaklaşımı
Değişken ve mixin'lerin abstracts'ta toplanması
Dosya adlandırma ve partial kuralları
Büyük projede klasör ölçekleme stratejisi

Modül 2

@use ve @forward Modül Sistemi

@use ile modül yükleme ve ad alanı
@import yerine @use'a geçiş gerekçesi
as ile ad alanı yeniden adlandırma
with ile modül yapılandırma değeri verme
@forward ile modül yeniden yayınlama
Özel üye gizleme ve genel API tasarımı

Modül 3

Tema ve Karanlık Mod

Tema değerlerinin map ile tanımlanması
CSS custom property ile çalışma zamanı tema
Sass değişkeni ile custom property köprüsü
prefers-color-scheme ile karanlık mod
Marka varyasyonları için tema üretimi
Tema geçişinde kontrast ve erişilebilirlik

Modül 4

Üretim ve Araç Entegrasyonu

compressed çıktı ile dosya boyutu azaltma
PostCSS ve Autoprefixer ile ön ek ekleme
Kullanılmayan CSS'in temizlenmesi
Vite veya webpack ile Sass derleme
Kaynak haritası ile hata ayıklama
Stil kılavuzu ve bileşen dokümantasyonu

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Sass söz dizimi

SCSS söz dizimini, değişkenleri ve iç içe yazımı kullanarak CSS'ten daha okunabilir ve düzenli stil kodu yazabilirsiniz.

✅

Mixin ve fonksiyon

Parametreli mixin ve @function ile yeniden kullanılabilir stil ve değer üreterek kod tekrarını belirgin biçimde azaltırsınız.

✅

Denetim yapıları

@if, @for ve @each ile koşullu ve döngüsel CSS yazarak yardımcı sınıf ve ölçekleri otomatik olarak üretebilirsiniz.

✅

Veri yapıları

Map ve list ile tema, renk paleti ve ölçek değerlerini merkezden yöneterek yapılandırmayı tek noktadan sürdürürsünüz.

✅

Modül sistemi

@use ve @forward ile ad alanı destekli modüler yapı kurarak büyük projelerde stil bağımlılıklarını düzenli yönetirsiniz.

✅

7-1 mimarisi

7-1 klasör deseniyle stili katmanlara bölerek ölçeklenebilir, bakımı kolay ve ekip içinde tutarlı bir yapı kurarsınız.

✅

Tema yönetimi

Map ve custom property köprüsüyle karanlık mod ve marka varyasyonlarını tek noktadan üreten tema sistemleri kurarsınız.

✅

Üretim çıktısı

Sıkıştırılmış çıktı, Autoprefixer ve build aracı entegrasyonuyla üretime hazır, optimize edilmiş CSS üretebilirsiniz.

Kimler İçin Uygundur?

CSS temelini bilen ve stil kodunu daha düzenli
tekrar kullanılabilir ve bakımı kolay yazmak isteyen ön yüz geliştiriciler
arayüz tasarımcıları
büyük projelerde stil mimarisi kurmak isteyen ekipler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

CSS temelini bilen ve stil kodunu daha düzenli, tekrar kullanılabilir ve bakımı kolay yazmak isteyen ön yüz geliştiriciler, arayüz tasarımcıları ve büyük projelerde stil mimarisi kurmak isteyen ekipler için uygundur. Seçiciler ve kutu modeli bilgisi beklenir.

Sass ile CSS arasındaki fark nedir?

Sass, derlendiğinde CSS'e dönüşen bir ön işlemci dilidir. CSS'in sağlamadığı değişken, iç içe yazım, mixin, fonksiyon, döngü ve modül sistemi gibi yapılarla stil kodunu daha düzenli ve yeniden kullanılabilir hale getirir. Tarayıcı yine standart CSS çalıştırır.

@import yerine neden @use kullanılır?

@import kullanım dışına alınmaktadır; aynı dosyayı birden çok kez yükler ve genel ad alanını kirletir. @use her modülü bir kez yükler, ad alanı sağlar ve with ile yapılandırma verir. Eğitimde @use ve @forward ile modern modül yapısı uygulamalı kurulur.

Eğitimin süresi ve formatı nedir?

Eğitim dört gün sürer ve her gün dört modülden oluşur. Gerçek bir arayüz projesinin stil katmanı Sass ile sıfırdan modüler biçimde kurulur. Yüz yüze veya online yapılabilir; içerik kurumun mevcut projelerine ve build araçlarına göre uyarlanabilir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve geliştirilen örnek Sass mimarisini belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

SASS (SYNTACTİCALLY AWESOME STYLE SHEETS) EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Sass'a Giriş ve Derleme

Değişkenler ve Veri Tipleri

İç İçe Yazım ve Seçiciler

Operatörler ve Hesaplama

Mixin ile Stil Paylaşımı

Fonksiyonlar ve Dönüş Değeri

@extend ve Placeholder

Responsive Mixin Desenleri

Koşul ve Döngüler

Map (Harita) Veri Yapısı

List ve Yardımcı Sınıflar

Yerleşik Modüller

7-1 Klasör Mimarisi

@use ve @forward Modül Sistemi

Tema ve Karanlık Mod

Üretim ve Araç Entegrasyonu

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Web Geliştiriciler için Bootstrap Eğitimi

Web Programming in Go: HTML Forms & ResponseWriter in Go Eğitimi

Whole Page Controls & Extending Bootstrap Eğitimi

Bootstrap Giriş Eğitimi

CSS Eğitimi

CSS Giriş Eğitimi