SASS Modülleri

Bu makale SASS modüllerini açıklar.

@use ve @forward kullanarak SASS'ın nasıl modülerleştirileceğini ve değişkenlerin, mixinlerin, fonksiyonların, tema ayarlarının ve genel API'lerin nasıl yeniden kullanılacağını açıklıyoruz.

YouTube Video

SASS Modülleri

SASS’ın modül sistemi, stilleri açıkça kapsamlamaya yardımcı olur ve yeniden kullanılabilir ile bakımı kolay bir tasarım sunar.

Modüllerin Temel Kavramları

SASS modülleri, eski @import ile mevcut olan global ad alanı kirliliği ve belirsiz bağımlılık problemlerini çözer. Her dosya kendi isim alanıyla bir modül olarak yüklenir ve sadece açıkça dışa aktarılan öğelere diğer dosyalardan erişilebilir.

Örnek Dosya Yapısı

Öncelikle, gerçekçi bir proje yapısının örneği aşağıdadır. Aşağıda küçük bir tasarım sistemi örneği vardır.

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss

• Bu yapı, modülerleştirmeyi, test etmeyi ve parçaları değiştirmeyi kolaylaştırır.
• Kısmi dosyaların dosya adının başında alt çizgi bulunur.

@use Temelleri

@use bir modülü yükler ve bir isim alanı sağlar. Bu, isim çakışmalarını önler ve kaynak modülü netleştirir.

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;

• Bu dosya, yalnızca değişkenleri tanımlayan basit bir dosyadır. Bir modülden yayınlanan değişkenlere doğrudan @use ile başvurulabilir.

1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}

• Burada, variables modülüne variables. isim alanıyla referans verilmiştir. Bu yaklaşım, her bir öğenin kaynağını netleştirir.

İsim Alanlarını Kısaltma veya Takma Ad Verme

as kullanmak, isim alanını kısaltmanıza olanak tanır.

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}

• Bu, variables modülünü daha kısa olan vars takma adıyla içe aktarma örneğidir. Okunabilirlik veya yazma kolaylığına öncelik verip vermediğinize göre adları seçin.

Mixin Tanımı

Mixin'ler ve fonksiyonlar da modüller içerisinde tanımlanıp kullanılabilir. Açıklamaların projedeki kurallara uygun olması, anlaşılırlığı artırır.

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}

• Bu dosya, konteynerler için bir mixin tanımlar. Argümanlar alır ve varsayılan değerler sağlar.

1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}

• Bu, @include ile bir mixin kullanma örneğidir.

Fonksiyon Tanımlama

Fonksiyonlar, değer döndürmek için kullanılır ve modüller içinde tanımlanıp yeniden kullanılabilir. Tasarım değerleri için hesaplamaları fonksiyonlarda kapsülleyerek, stiller daha kararlı ve bakımı daha kolay hale gelir.

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}

• Bu dosya, piksel değerlerini rem'e dönüştüren bir fonksiyon tanımlar. Ayrıca varsayılan bir temel değer de belirtilmiştir.

1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}

• İşte bir fonksiyonun @use ile çağrılıp sonucunun bir stile uygulanmasının bir örneği.

Modül Dışa Aktarımı ve @forward (API Tasarımı)

Birden fazla dahili dosyayı dışa açmak istediğinizde, 'public API' oluşturmak için @forward kullanabilirsiniz.

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';

• Birden fazla dahili dosya, tek bir giriş noktası olarak gruplanabilir ve bu giriş noktası genel API'yi sağlar. Bu sayede kullanıcılar, yalnızca tek bir giriş noktasını içe aktararak gerekli tüm özelliklere erişebilirler.

1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}

• variables ve mixins içeriğine topluca index üzerinden erişilir. @forward, index dosyasını genel katman haline getirir.

@forward'un show / hide seçenekleriyle API'yi kontrol etmek

Sadece belirli değişkenleri dışa aktarmak istiyorsanız, show veya hide seçeneğini kullanın.

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;

• !default eklemek, üzerine yazılabilir bir değer yayınlamanızı sağlar.

1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';

• @forward ile show kullanarak, dışa açılan API'yi yalnızca gerekli öğelerle sınırlayabilirsiniz. Dahili olarak kullanılan değişkenler ve fonksiyonlar dışarıdan görünmeyecektir.

Modülleri Yapılandırılabilir Hale Getirme (with ile)

Modülde !default kullanırsanız, değerler içe aktarma tarafında with ile değiştirilebilir.

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}

• !default ile tanımlanan varsayılan değerlere sahip bir modül, with ile yapılandırma alabilir.

1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}

• @use içindeki with, bir modüldeki varsayılan değişkenlerin içe aktarma sırasında değiştirilmesini sağlar. Bu, tema değiştirme için kullanışlıdır.
• with yalnızca içe aktarma sırasında etkilidir ve bu değerleri daha sonra değiştiremezsiniz.

Uygulamalı Örnek: Buton Bileşeni (Tam Örnek)

Modülleri kullanarak buton stillerini tasarlayalım. Önce, değişkenleri ve mixinleri kendi modüllerine ayırın.

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;

• Butonlar için varsayılan değişkenler burada tanımlanır. !default kullanmak, kullanıcıların bu değerleri değiştirmesine izin verir.

 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}

• Butonlar için temel mixin burada tanımlanır. Kolay tekrar kullanım için ayrılmışlardır.

 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}

• Buton stilleri, @use ile isim alanı referansları kullanılarak oluşturulur. Bir varyant .button--large olarak tanımlanır.

1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins

• button modülünü içe aktararak, buton stillerini hemen kullanabilirsiniz.

Tema Değiştirme (Birden Fazla Tema Dosyası Kullanarak)

Tema değiştirme, with aracılığıyla yapılandırmayla veya ayrı modüller oluşturup hangisinin @use ile kullanılacağını değiştirerek yapılabilir.

1// themes/_light.scss
2$brand-color: #0a74da !default;

1// themes/_dark.scss
2$brand-color: #111827 !default;

• Marka renklerini ve diğer ayarları birden fazla tema dosyasında tanımlayın ve derleme veya içe aktarma sırasında aralarında geçiş yapın.

1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';

• Temayı, with veya örneğin derleme sırasında @use 'themes/light' gibi bir içe aktarma ile seçin.

Özel ve Genel (Önek _ ve !default)

SASS'ta bir dosya adının başına alt çizgi eklemek, dosyayı kısmi (partial) olarak işaretler. Ancak, modül dışa aktarma görünürlüğünü yönetirken, dışa aktarılanları kontrol etmek için @forward ile show ve hide kullanın.

@forward kullanarak genel API'yi düzenleyebilir ve dahili uygulamaları dışarıdan gizleyebilirsiniz.

Gerçek Dünya Kullanımı İçin En İyi Uygulamalar

Aşağıda, SASS'ı pratikte kullanırken faydalı olan bazı temel kavramlar bulunmaktadır. Bu yönergelerin tümü, geliştirme sırasında kafa karışıklığını azaltmaya ve kodunuzu düzenli tutmanıza yardımcı olacaktır.

• Değişkenler tema kapsamında değişebilecekse, !default ekleyin. Bu, kullanıcıların değerleri geçersiz kılmasını kolaylaştırır.
• Modüller, sorumluluğa göre ayrılmalı ve tek bir amaca odaklanmalıdır. Değişkenleri, mixinleri ve bileşenleri ayırmak yönetimi kolaylaştırır.
• Genel içerikleri @forward ile yönetin ve gerektiğinde show ya da hide kullanın. Neyin genel olduğunu belirlemek daha güvenli bir tasarıma yol açar.
• Her fonksiyonun hangi modüle ait olduğunu netleştirmek için isim alanları kullanın. Bu, diğer kodlarla karışıklığı önler.
• with'in yalnızca @use sırasında çalıştığını unutmayın. Daha sonra değiştiremeyeceğiniz için, yapılandırmaları içe aktarma sırasında ayarlayın.
• Dosya adlarının başında alt çizgi kullanarak onları kısmi yapın, böylece ayrı olarak derlenmezler. Bu, dosyaların daha büyük bir yapıda birleştirilmesini kolaylaştırır.
• index modülüne kullanım örnekleri eklemek, test ve dokümantasyona yardımcı olur. Kullanıcıların davranışı anlaması kolaylaşır.

Bu noktaları aklınızda bulundurmak, büyük projeleri yönetmenize ve ekip olarak okunabilir kodu korumanıza yardımcı olacaktır.

Özet

SASS modül sistemi, stil kodunu ad alanları, genel API'ler ve basitleştirilmiş yapılandırma ile organize eder. @use ve @forward'un ustaca kullanılması, ekip geliştirmeyi, tema değiştirmeyi ve kütüphane tasarımını çok daha kolay hale getirir.

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

YouTube Video