SASS'da Dizeler

Bu makale SASS'daki dizeleri açıklar.

SASS'da temel dize işlemlerinden gelişmiş dize kullanımlarına kadar adım adım açıklayacağız.

YouTube Video

SASS'da Dizeler

SASS, CSS'i genişletmek için bir ön işlemcidir ve dizeler, stil tanımlarını daha esnek ve dinamik hale getirmek için temel bir unsurdur.

Dizelerin Temelleri

SASS'daki dizeler tek veya çift tırnak içine alınabilir ve bazı durumlarda dizeleri tanımlayıcılar gibi yazmak için tırnaklar atlanabilir. Aşağıda bunların nasıl yazılacağına dair temel örnekler bulunmaktadır.

1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;

Notlar

• Tırnak içindeki dizeler doğrudan dize ifadeleri olarak değerlendirilir.
• Tırnaksız dizeler genellikle sınıf isimleri veya ID'ler gibi CSS tanımlayıcıları olarak ele alınır, bu yüzden uygun şekilde kullanılmalarına dikkat edilmelidir.

Dize Birleştirme

SASS'da dizeleri + operatörüyle birleştirebilirsiniz.

1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"

• Bu kod, SASS'da birden fazla dizenin + operatörü ile birleştirilerek yeni bir dize oluşturulmasına örnektir.

Gelişmiş Örnek: Sınıf İsimleri Oluşturmak

1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5    content: $base-class + "--" + $modifier; // "btn--primary"
6}

• Bu kod, SASS'da temel bir sınıf ismi ile bir değiştiriciyi + operatörüyle birleştirerek yeni bir sınıf ismi oluşturmak için bir örnektir.

Dize Fonksiyonlarını Kullanmak

SASS, tırnak kontrolü ve alt dize çıkartma gibi çeşitli dize işlemleri için kullanışlı yerleşik fonksiyonlar sağlar.

quote() ve unquote()

quote() ve unquote() fonksiyonları ile dizelere tırnak ekleyip kaldırabilirsiniz.

1$quoted: quote(Hello);    // '"Hello"'
2$unquoted: unquote("Hello"); // Hello

str-length($string)

str-length() fonksiyonu bir dizenin uzunluğunu alır.

1$length: str-length("Hello"); // 5

str-insert($string, $insert, $index)

str-insert() fonksiyonu bir dizgeye belirtilen konumda başka bir dizge ekler.

1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"

str-slice($string, $start-at, [$end-at])

str-slice() fonksiyonu bir dizenin bir bölümünü çıkartır.

1$substring: str-slice("Hello, World!", 1, 5); // "Hello"

to-upper-case() ve to-lower-case()

to-upper-case() ve to-lower-case() fonksiyonları bir dizgeyi sırasıyla büyük harfe veya küçük harfe dönüştürür.

1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"

Koşullu Mantıkta Dizeler

SASS'ın @if direktifini kullanarak, dize değerlerine göre koşullu dallanma yapabilir ve temalar ile ayarlara göre stilleri esnek şekilde değiştirebilirsiniz.

 1$theme: "dark";
 2
 3@if $theme == "dark" {
 4  body {
 5    background-color: black;
 6    color: white;
 7  }
 8} @else {
 9  body {
10    background-color: white;
11    color: black;
12  }
13}

• Bu kod, SASS'da temanın dark olup olmadığını kontrol etmek ve buna göre stilleri değiştirmek için @if direktifinin kullanımına bir örnektir.

Pratik Örnek: Dinamik Arka Plan Görseli Yolları Oluşturmak

Aşağıda arka plan görseli URL'si oluşturmak için dize manipülasyonlarının nasıl kullanılacağına dair bir örnek bulunmaktadır.

1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6    background-image: url($image-path + $image-name + $image-extension);
7}

Derlenmiş Sonuç

1.background {
2    background-image: url("/images/background.jpg");
3}

• Bu kod, SASS'da arka plan görseli yolu oluşturup bunu arka plan olarak uygulamak için dizelerin birleştirilmesine örnektir.

Listeler ve Haritalarla Birleştirme

SASS'daki listeleri ve haritaları dize işlemleriyle birleştirerek stilleri daha esnek şekilde oluşturabilirsiniz.

Liste Örneği

1$states: "hover", "focus", "active";
2
3@each $state in $states {
4    .btn-#{$state} {
5        content: "Button in " + $state + " state";
6    }
7}

Derlenmiş Sonuç

1.btn-hover {
2    content: "Button in hover state";
3}
4.btn-focus {
5    content: "Button in focus state";
6}
7.btn-active {
8    content: "Button in active state";
9}

• Bu kod, bir listedeki her durum için sınıflar oluşturmak ve içerikleri dizeleri birleştirerek dinamik olarak ayarlamak için SASS'daki @each direktifinin kullanımına bir örnektir.

Harita Örneği

 1$colors: (
 2    "primary": "#3498db",
 3    "secondary": "#2ecc71"
 4);
 5
 6@each $name, $color in $colors {
 7    .text-#{$name} {
 8        color: $color;
 9    }
10}

Derlenmiş Sonuç

1.text-primary {
2    color: #3498db;
3}
4.text-secondary {
5    color: #2ecc71;
6}

• Bu kod, renk isimlerini değerlerle eşleştirmek ve her sınıfı @each direktifiyle dinamik olarak oluşturmak için SASS haritası kullanımına bir örnektir.

Dizeleri Kaçırmak (Escape Etmek)

Bazı dizeleri CSS tanımlayıcıları olarak güvenle kullanmak için kaçırma (escape) yapmak gerekebilir.

1$special_character: "example\\@123";
2.#{$special_character} {
3  content: "This is a valid CSS class.";
4}

Derlenmiş Sonuç

1.example\@123 {
2    content: "This is a valid CSS class.";
3}

• Bu kod, özel karakterler içeren bir dizeyi SASS'ta bir değişken olarak ele almanın, bunu #{$variable} ile genişletmenin ve CSS'te geçerli bir sınıf adı olarak kullanmanın bir örneğidir.

Sonuç

SASS'daki dize işlemleri, yalnızca dize ifadeleri yazmaktan çok daha fazlasıdır—bunlar, dinamik olarak stiller oluşturmak için güçlü araçlardır. Burada tanıtılan temel işlemler ve fonksiyonları kullanarak, CSS'inizin tekrar kullanılabilirliğini ve bakımı daha kolay olacak şekilde stil tasarımlarınızı daha verimli şekilde geliştirebilirsiniz.

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

YouTube Video