SASS Fonksiyonları
Bu makale SASS fonksiyonlarını açıklar.
Gerçek dünyada işinize yarayacak pratik örnekler de dahil olmak üzere, temelinden ileri düzeye kadar SASS fonksiyonlarını kapsamlı şekilde açıklayacağız.
YouTube Video
SASS Fonksiyonları
SASS fonksiyonları, stil dosyalarında yeniden kullanılabilir mantığı kapsayan ve hesaplama, biçimlendirme, koşullu dallanma imkanı sağlayan güçlü araçlardır.
Fonksiyonların Temel Yapısı ve Kullanımı
SASS fonksiyonları @function ile tanımlanır ve @return ile bir değer döndürür. Fonksiyonlar, dahili fonksiyonlar ile aynı şekilde çağrılır.
1// Example: Define a simple function that doubles a value
2@function double($n) {
3 @return $n * 2;
4}
5
6// Use the function
7.example {
8 width: double(10px); // -> 20px
9}- Bu kod, bir sayıyı iki katına çıkaran ve genişliğe uygulayan bir fonksiyon tanımlar. Sonuç olarak,
.example { width: 20px; }oluşturulacaktır.
Argümanlar, Varsayılan Değerler ve Tip Yönetimi
Fonksiyonlar birden fazla argüman alabilir ve varsayılan değerler ayarlayabilir. SASS statik tipi zorunlu kılmaz, ancak argüman formatlarına dikkat etmek fonksiyonlarınızı daha sağlam yapar.
1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3 @return $base-size * $scale + $unit;
4}
5
6.title {
7 font-size: responsive-font(16, 1.25); // -> 20px
8}responsive-fontfonksiyonu,scaleveunitiçin varsayılan değerlere sahiptir ve bu fonksiyonu çağırırken bazı argümanlar atlanabilir.font-size: 20px;gibi bir değer bu örnekte çıktı olarak verilecektir.
Değişken Sayıda Argüman Kullanımı (...)
Birden fazla değer iletmek istiyorsanız değişken sayıda argüman kullanın. Bu, liste ya da birden fazla rengi işlerken yararlıdır.
1// Example: Sum any number of numbers passed in
2@function sum-all($numbers...) {
3 $total: 0;
4 @each $n in $numbers {
5 $total: $total + $n;
6 }
7 @return $total;
8}
9
10.box {
11 padding: sum-all(4px, 6px, 10px); // -> 20px
12}$numbers...gibi değişken sayıda bir argüman, bir liste olarak ele alınır ve@eachile işlenebilir. Bu örnekte,padding: 20px;çıktı olarak verilecektir.
Liste ya da Haritaları Döndürme ve İşleme
Fonksiyonlar ayrıca liste (boşluk veya virgül ile ayrılmış) ve harita da döndürebilir. Bu, karmaşık değerler döndürmek için faydalıdır.
1@use "sass:map";
2
3// Example: Return a map of spacing scale
4@function spacing-scale($base) {
5 @return (
6 'small': $base * 0.5,
7 'medium': $base,
8 'large': $base * 2
9 );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15 margin-bottom: map.get($scale, 'medium');
16}- Fonksiyon bir harita (map) döndürür ve ardından değerler
map.getile alınır. Bu size tutarlı bir aralık sistemi oluşturma imkanı tanır.
Koşullular ve Döngülerle Fonksiyonlar
@if, @else if, @else, @for, @each ve @while fonksiyonların içinde kullanılabilir. Koşullular ve döngüler ile hesaplama mantığı oluşturabilirsiniz.
1// Example: Generate modular scale value using loop
2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
3 $result: $base;
4 @if $step == 0 {
5 @return $result;
6 }
7 @if $step > 0 {
8 @for $i from 1 through $step {
9 $result: $result * $ratio;
10 }
11 } @else {
12 @for $i from 1 through abs($step) {
13 $result: $result / $ratio;
14 }
15 }
16 @return $result;
17}
18
19.h1 {
20 font-size: modular-scale(3, 1rem, 1.333);
21}- Bu fonksiyon, pozitif ya da negatif adımlara göre modüler ölçek hesaplar ve çarpar ya da böler.
modular-scale(3, 1rem, 1.333)temelin üç adım yukarısında bir yazı tipi boyutu döndürür.
Hata Yönetimi ve Uyarılar (@error, @warn)
Geçersiz argümanlarda veya beklenmeyen işlemlerde @error ile işleyişi durdurabilir, @warn ile uyarı verebilirsiniz. Amaç, kullanıcıları sorunlar hakkında erkenden bilgilendirmektir.
1@use "sass:math";
2@use "sass:meta";
3
4// Example: Validate input and throw an error for invalid units
5@function ensure-length($value) {
6 @if meta.type-of($value) != 'number' or math.is-unitless($value) {
7 @error "Expected a length with units, got #{$value}.";
8 }
9 @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14 width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21// // expect error: "Expected a length with units, got 10."
22// width: ensure-length(10);
23// }- Geçersiz değerler verdiğinizde, derleme anında bir hata çıktılanır ve böylece sebebini bulmak kolaylaşır. Fonksiyon içindeki kontroller, hataları erken tespit etmeye yardımcı olur.
Renge Özel Fonksiyonlar Oluşturma
SASS'ta, kendi renk paletinizi oluşturmak için renklerle ilgili çeşitli fonksiyonları birleştirebilirsiniz. Bu, projeniz genelinde tutarlı bir renk düzeni yönetmek için faydalıdır.
1@use "sass:color";
2@use "sass:list";
3
4// Example: Generate a color palette (tints and shades) from a base color
5@function palette($color, $steps: 5, $strength: 10%) {
6 $colors: ();
7 @for $i from 0 through $steps {
8 $amount: $i * $strength;
9 $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10 $tint: color.mix(white, $color, $amount);
11 $colors: list.append($colors, $shade);
12 $colors: list.append($colors, $tint);
13 }
14 @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20 background-color: list.nth($palette, 1);
21}- Bu örnekte, koyu tonlar oluşturmak için siyah ile, açık tonlar oluşturmak için ise beyaz ile karıştırmak amacıyla
color.mixkullanılır. Değerler bir liste olarak döndürülür velist.nthile erişilebilir.
Performans ve Derleme Süresi ile İlgili Notlar
SASS fonksiyonları derleme sırasında değerlendirilir. Yoğun döngüler, derin özyineleme ya da kapsamlı harita işlemleri derleme süresini artırır. Fonksiyonları küçük ve basit tutun; gerekirse karmaşık işlemleri SASS dışında, yapı araçlarında veya ön işlemcilerde ele alın.
Pratik Yardımcı Fonksiyon Koleksiyonu
İşte sıkça kullanılan bazı yardımcı fonksiyonlar. Kod, gerçek projelerde hemen kullanılabilir olacak şekilde tasarlanmıştır.
1@use "sass:math";
2
3// Example: Clamp a value between min and max
4@function clamp-value($value, $min, $max) {
5 @if $value < $min {
6 @return $min;
7 } @else if $value > $max {
8 @return $max;
9 }
10 @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15 @if math.unit($px) != "px" {
16 @error "px-to-rem requires a px value.";
17 }
18 @return ($px / $root) * 1rem;
19}clamp-valuebir değere üst ve alt sınır uygular,px-to-remise piksel değerlerini rem birimine çevirir. Bu her iki fonksiyon da duyarlı tasarımda sıkça karşılaşılan işlemleri basitleştirir.
@function ve Karışımlar (@mixin) Arasında Seçim Yapma
Fonksiyonlar değer döndürmeye odaklanırken, karışımlar CSS blokları çıktılar. Eğer mantık sonucu tek bir özellik değeri ise fonksiyon kullanın; bir stil bloğu ise karışım (mixin) kullanın.
1// Example: Function returns a value
2@function border-radius-value($size) {
3 @return $size * 1px;
4}
5
6// Example: Mixin outputs properties
7@mixin rounded($size) {
8 border-radius: border-radius-value($size);
9 -webkit-border-radius: border-radius-value($size);
10}
11.card {
12 @include rounded(8);
13}- Fonksiyonlar diğer özelliklerde kullanılmak üzere sayı veya renk gibi değerler döndürürken, karışımlar doğrudan özellik gruplarını ekler. Tasarımda kesin ayrım, sürdürülebilirliği artırır.
Dizgi Manipülasyonu ve Çıktı Formatı Dikkatleri
SASS'ta birim içeren sayılarla ve dizgilerle uğraşırken dikkatli olun. Birimli bir sayıya dizgi eklemek, istenmeyen çıktılar oluşturabilir. Gerektiğinde unquote() veya dizgi araya eklemeyi (#{}) kullanın.
1@use "sass:math";
2
3// Example: Safely create a CSS value string
4@function px-percentage($px, $total) {
5 $percent: math.div($px, $total) * 100;
6 @return "#{$percent}%";
7}
8
9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11 $percent: math.div($px, $total) * 100;
12 // Round to 2 decimal places safely
13 $rounded: math.div(math.round($percent * 100), 100);
14 @return "#{$rounded}%";
15}- Yüzdeleri dizgi olarak döndürürken, kesinliği artırmak için araya ekleme veya
roundkullanın. Hataları önlemek için, hesaplama sonuçlarını dizgilerle birleştirirken veri tiplerini net şekilde yönetin.
Test ve Dokümantasyon için En İyi Uygulamalar
Bir fonksiyon yazdıktan sonra, test amacıyla kullanım örnekleri içeren küçük SCSS dosyaları oluşturun; bu, bakımı kolaylaştırır. Her fonksiyon için giriş tipi/birimi, dönüş tipi, hata davranışı ve kullanım örneklerini dokümante edebilirsiniz.
1@use "sass:math";
2
3// Example: Inline "tests" (partial usage examples)
4// These can be compiled separately during development
5
6@function double($n) {
7 @return $n * 2;
8}
9
10@function px-to-rem($px, $root: 16px) {
11 @if math.unit($px) != "px" {
12 @error "px-to-rem requires a px value.";
13 }
14 @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19 width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24 font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";- 'Beklenen çıktı' ile ilgili küçük örnekler içeren açıklama satırları bırakmak, gelecekteki yeniden düzenlemede gerilemeleri fark etmeyi kolaylaştırır. Bir CI ortamında otomatik derleme yapmak ve çıktıyı görsel olarak incelemek etkilidir.
Özet
SASS fonksiyonları, stillerde tekrar kullanılabilirliği ve tutarlılığı artırmak için güçlü bir yöntemdir. Onları küçük ve basit olacak şekilde tasarlayın ve güvenliği @error ve @warn kullanarak sağlayın. Renk, aralık ve birim dönüşümü için yardımcı fonksiyonları ortak bir kütüphanede toplamak faydalıdır. Derleme yükünden kaçınmak için, gerekli olduğunda karmaşık işlemleri diğer yapı adımlarına ayırmayı düşünün.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.