SASS Değişkenleri

Bu makale SASS değişkenlerini açıklar.

SASS değişkenlerini detaylı olarak açıklayacak ve gerçek kullanımlarını adım adım öğreneceğiz.

YouTube Video

SASS Değişkenleri

SASS, CSS'i daha esnek ve verimli bir şekilde yazmanıza olanak tanıyan bir CSS uzantı dilidir. Özelliklerinden biri olan değişkenler, stil tutarlılığını korurken değişikliklerin daha kolay yapılmasını sağlayan güçlü bir araçtır.

SASS Değişkenleri Nedir?

SASS değişkenleri, sıkça kullanılan renkler, yazı tipi boyutları ve boşluklar gibi değerleri tek bir yerde saklamanızı ve yönetmenizi sağlar.

Değişkenler kullanarak stilleri kolayca değiştirebilir ve kodun okunabilirliğini artırabilirsiniz.

Değişkenler Nasıl Yazılır

Değişkenler aşağıdaki gibi yazılabilir.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Değişken adının başına $ sembolü eklemeniz gerekir.
• variable-name, değişkenin adıdır. Açık ve açıklayıcı bir ad vermeniz önerilir.
• value, değişkene atanan değerdir.

Değişkenlerin Temel Kullanımı

Aşağıda bir SASS değişkeninin temel bir örneği bulunmaktadır.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• $primary-color gibi bir değişken tanımladığınızda, aynı değeri istediğiniz kadar tekrar kullanabilirsiniz.
• Bir değeri değiştirdiğinizde, yalnızca değişken tanımını düzenlemeniz yeterlidir; bu da bakım kolaylığı sağlar.

Oluşturulan CSS Çıktısı

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

İç İçe Kullanımlarda Değişkenlerin Kullanımı

SASS iç içe kullanımı ile değişkenleri birleştirmek kodunuzu düzenlemenize ve yönetimini kolaylaştırır.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• İç içe seçicilerde değişkenleri kullanabilirsiniz.
• Değişkenleri birleştirerek, color.adjust fonksiyonunu kullanarak bir rengi %10 daha koyu yapmak gibi esnek stiller elde edebilirsiniz.

Oluşturulan CSS Çıktısı

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Varsayılan Değere Sahip Değişkenler

SASS'ta değişkenler için varsayılan değerler atayabilirsiniz. Varsayılan değer tanımlayarak mevcut değişkenlerin üzerine yazmadan onları kullanabilirsiniz.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• !default ekleyerek, değişken zaten tanımlıysa üzerine yazılmaz.
• Bu özellik, ekip geliştirmesi veya proje genelindeki ayarlar için faydalıdır.

Oluşturulan CSS Çıktısı

1p {
2    font-size: 16px;
3}

Değişken Kapsamı

SASS değişkenlerinin kapsamı vardır ve kullanılabilirlikleri nerede tanımlandıklarına bağlıdır. Kapsamı anlamak, değişkenlerin yanlışlıkla üzerine yazılmasını önlemeye yardımcı olur.

1. Global Kapsam

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Global kapsamda tanımlı değişkenler dosyanın tamamında kullanılabilir.

2. Yerel Kapsam

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Yerel kapsamda tanımlı değişkenler yalnızca belirli bir iç içe yapıda veya dosyada kullanılabilir.

Hesaplamalarda Değişkenlerin Kullanımı

SASS değişkenleri hesaplamalarda da kullanılabilir. Birim tabanlı değerler ve renkler üzerinde de hesaplamalar yapılabilir.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Oluşturulan CSS Çıktısı

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Renk ayarları veya boşluk hesaplamaları için değişken kullanmak bakım kolaylığı sağlar.

Özet

SASS değişkenleri, verimli CSS yönetimi ve bakımı için temel bir özelliktir.

SASS değişkenlerini kullanmak, proje genelinde tutarlı stiller oluşturmanıza ve değişiklikleri daha kolay yapmanıza yardımcı olur.

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

YouTube Video