SASS'ta Operatörler

Bu makale SASS'taki operatörleri açıklar.

SASS'taki operatörleri pratik örneklerle açıklayacağız.

YouTube Video

SASS'ta Operatörler

SASS operatörleri sayısal işlemler, karşılaştırma işlemleri, mantıksal işlemler ve dize manipülasyonlarını içerir.

Aritmetik İşlemler (toplama, çıkarma, çarpma, bölme, modül)

SASS standart aritmetiği destekler, ancak bölme (/) CSS'in / işleci ile karışıklığa neden olur, bu yüzden math.div() kullanılması önerilir. Sayılar birimlere sahip olabilir ve işlemler yalnızca uyumlu birimler arasında mümkündür.

Aşağıda basit aritmetik ve math modülünün kullanımıyla ilgili örnekler bulunmaktadır.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• Bu kod, px birimiyle toplama ve çarpma ile math.div() kullanarak bölmenin bir örneğidir.
• 10px + 2em gibi uyumsuz birimler hata veya beklenmeyen sonuçlarla karşılaşmanıza neden olur. Birimleri birleştirin veya unit() ve unitless() fonksiyonlarını kullanın.

Birimlerin işlenmesi ve otomatik olarak dönüştürülmesi

SASS, birimli sayıları işler ve hesaplama sonuçlarının birim kuralları genel fizik kurallarını takip eder. Örneğin, px/px birimsiz hale gelir. unit() fonksiyonunu kullanırken veya math.div() sonrasında birim yönetimine dikkat edin.

Aşağıda, birimli ve birimsiz değerlerin nasıl karıştırılacağını gösteren örnekler bulunmaktadır.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• Birimli ve birimsiz değerleri çarpmak beklenildiği gibi çalışır, ancak bölme işlemlerinde oluşan birime (veya birimsizliğe) dikkat edin.

Karşılaştırma Operatörleri (==, !=, <, >, <=, >=)

SASS karşılaştırma operatörlerine sahiptir ve bunlar koşullu dallanmalarda (@if) ve mixin'lerde kullanılabilir. Renkler ve listeler gibi karmaşık tiplerin karşılaştırılması kendi kurallarına tabidir. Renk karşılaştırmalarının, renk alanına bağlı olarak değiştiğini unutmayın.

Aşağıda iki sayının karşılaştırılıp stilin dallandırıldığı bir örnek bulunmaktadır.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• Karşılaştırma operatörleri, duyarlı ve koşullu stil kuralları için @if ile birleştirilebilir.

Mantıksal İşlemler (and, or, not)

SASS, and, or ve not işleçlerini destekler. and/or kullanarak birden fazla koşulu birleştirin. Öncelik ve değerlendirme sırası parantezlerle açıkça belirtilebilir.

Aşağıda, mantıksal operatörlerle karmaşık koşulların nasıl yönetileceğine dair bir örnek bulunmaktadır.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• and ve or işleçlerinin önceliği parantezler ile netleştirilebilir. Karmaşık koşullarda parantez kullanımı, okunabilirlik ve güvenliği artırır.

String İşlemleri — Birleştirme ve Enterpolasyon

SASS'ta string birleştirme + veya #{} enterpolasyonu ile yapılabilir. + işleciyle yapılan birleştirmenin sonucu, sol stringin tırnaklı olup olmamasına bağlıdır, bu nedenle öngörülebilir olan #{} enterpolasyonu daha güvenlidir.

Aşağıda birleştirme ve enterpolasyon örnekleri bulunmaktadır.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• #{} enterpolasyonu kullanmak, tırnaklarla ilgili sorunları ve istemsiz boşluk eklenmesini önler.

Renk aritmetiği (artık kullanılmıyor)

Geçmişte SASS, renklere sayılar ekleyip çıkarmanıza olanak tanıyan 'renk aritmetiği'ni destekliyordu. Ancak renk aritmetiği artık kullanımdan kaldırıldı ve renkleri değiştirmek için sass:color modülündeki fonksiyonları kullanmalısınız.

Aşağıda doğrudan renk aritmetiğinin artık kullanılmadığını ve önerilen alternatifleri gösteren örnekler bulunmaktadır.

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• Renkleri değiştirmek istiyorsanız, sass:color modülündeki fonksiyonları kullanın.

Parantezler ve Operatör Önceliği

İşlemlerde değerlendirme sırasını kontrol etmek için parantez kullanın. Parantezler içindeki işlemler, dıştaki işlemlerden önce değerlendirilir. Karmaşık ifadelerde parantez kullanarak okunabilirliği koruyun.

Aşağıda, parantezlerle değerlendirme sırasının nasıl netleştirileceğine dair örnekler bulunmaktadır.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• Matematikte olduğu gibi, öncelik kuralları geçerlidir, bu yüzden hesaplamaların istenen sırada gerçekleşmesi için parantez kullanın.

Özet

SASS'ta operatör kullanırken, kodun gelecek uyumluluğu ve okunabilirliği gözetilmelidir. Karmaşık ifadelerde, hesaplama sırasını parantezlerle netleştirin ve kodun okunabilirliğine öncelik verin.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video