SASS'te Haritalar
Bu makale, SASS'teki haritaları açıklar.
SASS haritalarının temelinden ileri kullanımlarına kadar açıklayacak ve pratik örnekler sunacağız.
YouTube Video
SASS'te Haritalar
SASS'te Harita (Map) Nedir?
SASS'teki bir harita, anahtar-değer çiftleri tutan bir veri yapısıdır; bu, JavaScript'teki nesnelere veya Python'daki sözlüklere benzer. SASS'teki haritaları kullanarak karmaşık stilleri daha öz bir şekilde yönetebilir ve sürdürülebilirliği artırabilirsiniz.
Haritaların Temel Söz Dizimi
SASS'teki haritalar () (parantezler) kullanılarak tanımlanır. Söz dizimi aşağıdaki gibidir:.
1$map-name: (
2 key1: value1,
3 key2: value2,
4 key3: value3
5);Örneğin, renk temalarını yönetmek için bir harita oluşturmak istiyorsanız, aşağıdaki gibi tanımlayabilirsiniz:.
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);Bir Haritadan Değerleri Alma
SASS'te bir haritadan bir değer almak için map.get() fonksiyonunu kullanırsınız.
Kullanım örneği:
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8.button {
9 background-color: map.get($colors, primary);
10}Çıktı:
1.button {
2 background-color: #3498db;
3}- Bu kod,
$colorsharitasındanprimaryrenk değerini alır ve butonun arka plan rengine uygular.
Bir Haritada Anahtar ve Değer Atama
map.set() fonksiyonunu kullanarak, belirli bir anahtara yeni bir değer atayabilirsiniz. Anahtar zaten mevcutsa, değeri üzerine yazılır.
Örnek Kullanım
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8// set danger color
9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12 background-color: map.get($updated-colors, danger);
13}- Bu kod, haritaya bir
dangeranahtarı ekler ve bu değeri butonun arka plan rengi olarak ayarlar.
Çıktı
1.button-danger {
2 background-color: #e74c3c;
3}Bir Haritadan Anahtarları Kaldırma
map.remove() fonksiyonunu kullanarak, bir haritadan belirli bir anahtarı ve değerini kaldırabilirsiniz.
Örnek Kullanım
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71,
6 danger: #e74c3c
7);
8
9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13 background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17 background-color: map.get($reduced-colors, danger);
18}- Bu kod, haritadan
dangeranahtarını kaldırır, bu yüzdenbutton-danger'ın arka plan renginullolacaktır.
Çıktı
1.button-primary {
2 background-color: #3498db;
3}Bir Haritaya Anahtar ve Değerler Ekleme
map.merge() fonksiyonunu kullanarak, mevcut bir haritaya yeni anahtarlar ve değerler ekleyebilirsiniz.
Örnek Kullanım
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (danger: #e74c3c));
9
10.button-danger {
11 background-color: map.get($extended-colors, danger);
12}- Bu kod, mevcut bir SASS haritasına
dangeranahtarını ekler ve rengini butonun arka plan rengi olarak ayarlar.
Çıktı
1.button-danger {
2 background-color: #e74c3c;
3}Bir Haritaya Birden Fazla Anahtar ve Değer Ekleme
map.merge() fonksiyonu ile, mevcut bir haritaya aynı anda birden fazla yeni anahtar ve değer ekleyebilirsiniz.
Örnek Kullanım
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (
9 danger: #e74c3c,
10 warning: #f39c12,
11 info: #8e44ad
12));
13
14.button-danger {
15 background-color: map.get($extended-colors, danger);
16}- Bu kod, mevcut bir SASS haritasına aynı anda birden fazla anahtar ve değer ekler.
Bir Haritada Anahtarın Mevcut Olup Olmadığını Kontrol Etme
map.has-key() fonksiyonu, bir haritada belirli bir anahtarın var olup olmadığını kontrol etmenizi sağlar.
Örnek Kullanım
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger); // falseBir Haritadan Tüm Anahtarları veya Değerleri Alma
Tüm anahtarları alma
map.keys() fonksiyonunu kullanarak tüm anahtarları alabilirsiniz.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)Tüm değerleri alma
map.values() fonksiyonu ile tüm değerleri alabilirsiniz.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)Bir Haritada Döngü Oluşturma
SASS'te, bir haritada döngü oluşturmak için @each direktifini kullanabilirsiniz.
Örnek Kullanım
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $color in $colors {
8 .color-#{$name} {
9 background-color: $color;
10 }
11}- Bu kod, bir SASS haritasındaki her anahtar ve değeri döngüye sokar ve her renk için otomatik olarak bir sınıf oluşturur.
Çıktı
1.color-primary {
2 background-color: #3498db;
3}
4
5.color-secondary {
6 background-color: #2ecc71;
7}
8
9.color-danger {
10 background-color: #e74c3c;
11}İç İçe (Nested) Haritalarla Çalışmak
Haritalar ayrıca iç içe bir yapıda da olabilir. Bu durumda, iç içe map.get() fonksiyonları kullanılır.
Örnek Kullanım
1@use "sass:map";
2
3$themes: (
4 light: (
5 background: #ffffff,
6 text: #000000
7 ),
8 dark: (
9 background: #000000,
10 text: #ffffff
11 )
12);
13
14body {
15 background-color: map.get(map.get($themes, light), background);
16 color: map.get(map.get($themes, light), text);
17}- Bu kod, iç içe geçmiş bir SASS haritasından
lighttemasının arka plan ve metin renklerini alır ve bunlarıbody'ye uygular.
Çıktı
1body {
2 background-color: #ffffff;
3 color: #000000;
4}Harita Kullanım Durumu: Duyarlı (Responsive) Tasarım
Haritalar kullanarak medya sorgularını ve duyarlı tasarımı kolayca yönetebilirsiniz.
Örnek Kullanım
1$breakpoints: (
2 small: 480px,
3 medium: 768px,
4 large: 1024px
5);
6
7@each $label, $size in $breakpoints {
8 @media (max-width: $size) {
9 .container-#{$label} {
10 width: 100%;
11 }
12 }
13}- Bu kod, her breakpoint için otomatik olarak duyarlı konteyner sınıfları oluşturmak için bir SASS haritası kullanır.
Çıktı
1@media (max-width: 480px) {
2 .container-small {
3 width: 100%;
4 }
5}
6
7@media (max-width: 768px) {
8 .container-medium {
9 width: 100%;
10 }
11}
12
13@media (max-width: 1024px) {
14 .container-large {
15 width: 100%;
16 }
17}Sonuç
SASS haritaları, stil dosyanızı düzenlemek, esnekliği ve tekrar kullanılabilirliği artırmak için güçlü bir araçtır. Değer yönetimi, döngüler ve duyarlı tasarımın uygulanması gibi birçok senaryoda kullanılabilirler.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.