SASS'ta `@forward`

Bu makale SASS'taki @forward hakkında açıklama yapmaktadır.

@forward öğesini, pratik örnekler dahil olmak üzere kolay anlaşılır bir şekilde açıklayacağız.

YouTube Video

SASS'ta @forward

@forward nedir?

SASS’ın modül sisteminde, @import yerine @use ve @forward kullanılır. @forward, mimarinizi temiz tutmak için önemli bir özelliktir. Diğer dosyalarda tanımlanan değişkenleri, mixin’leri ve fonksiyonları 'dışarıya açmak' için kullanılan bir yönergedir. Tek başına kullanılmak yerine, 'Bu modülü buradan kullan' şeklinde bir giriş noktası görevi görür.

1@forward "variables";

• Bu kod, 'variables.scss' içeriğinin diğer dosyalar tarafından kullanılabilir hale getirilmesi' anlamına gelir.

@use ve @forward arasındaki fark

@use ve @forward her ikisi de modüllerle çalışmak için kullanılan yazımlardır ancak amaçları birbirinden farklıdır. @use, ilgili dosyadaki öğeleri kullanmak için, @forward ise bu öğeleri başka dosyaların kullanımına sunmak için kullanılan bir yönergedir.

1// @use: import the module for use in this file
2@use "variables";
3
4// @forward: re-export the module for other files to consume
5@forward "variables";

• @use mevcut dosyanın gerçekleştirilmesi için gerekli bağımlılıkları belirtirken, @forward dosyayı bir genel API giriş noktası olarak işlevsel kılar. Bu farkı anlamak, @forward'ı nerede kullanmanız gerektiğini belirlemenize yardımcı olacaktır.

@forward neden gereklidir?

Daha fazla Sass dosyası ekledikçe, çok sayıda @use ifadesi yazmanız gerekebilir. @forward kullanarak her şeyi tek bir giriş dosyasında toplayabilirsiniz.

1styles/
2├─ foundation/
3│  ├─ _variables.scss
4│  ├─ _mixins.scss
5│  └─ _index.scss
6└─ main.scss

• Bu yapıda _index.scss, 'genel API' olarak işlev görür.

@forward'un temel kullanımı

@forward'un temel kullanımına bakalım.

1// _variables.scss
2// Color definitions used across the project
3
4$primary-color: #006ab1;
5$secondary-color: #e0f0ff;
6
7// Internal use only (will be hidden via @forward hide)
8$debug-color: magenta;

• Bu değişkeni doğrudan @use etmek yerine, onları @forward ile gruplayabilirsiniz.

1// _index.scss
2@forward "variables";

• Bu noktada _index.scss hiçbir şey içermez; sadece bir aktarım dosyasıdır.

@forward edilmiş modüllerin kullanımı

Tek tek dosyaları doğrudan @use etmek yerine, tüketici tarafında sadece @forwardların gruplanmış olduğu index dosyasını @use edersiniz. Bu şekilde, iç yapısının farkında olmadan stabil bir arayüz olarak kullanabilirsiniz.

1// main.scss
2// Import the public API of the foundation layer
3@use "foundation";
4
5.button {
6  background-color: foundation.$primary-color;
7}

• Bu tasarım sayesinde, değişken veya mixin tanımlarının yeri değişse bile, tüketici tarafında herhangi bir kodu değiştirmeden iç yapıyı değiştirebilirsiniz.

@forward ile birden fazla modülü birleştirme

Gerçek geliştirme sürecinde, değişkenlerin, mixin’lerin ve fonksiyonların rollerine göre bölünmesi yaygındır. @forward birden fazla kez yazılabilir ve bu sayede ayrılmış modülleri tek bir genel API altında toplayabilirsiniz.

Aşağıda, mixin ve fonksiyon örnekleri veriyor ve bunları dışarıya tek bir arayüz olarak açan bir tasarımı gösteriyoruz.

 1// _mixins.scss
 2// Reusable mixins for layout and components
 3
 4// Reset default button styles
 5@mixin button-reset {
 6  appearance: none;
 7  background: none;
 8  border: none;
 9  padding: 0;
10  margin: 0;
11  font: inherit;
12  color: inherit;
13}
14
15// Clearfix utility
16@mixin clearfix {
17  &::after {
18    content: "";
19    display: table;
20    clear: both;
21  }
22}
23
24// Internal mixin (not intended to be part of the public API)
25@mixin debug-outline {
26  outline: 2px dashed red;
27}

 1// _functions.scss
 2// Utility functions for consistent styling
 3
 4@use "sass:math";
 5
 6// Convert px to rem based on a 16px root size
 7@function rem($px) {
 8  @return math.div($px, 16) * 1rem;
 9}
10
11// Clamp a value between a minimum and maximum
12@function clamp-value($value, $min, $max) {
13  @return math.max($min, math.min($value, $max));
14}

1// _index.scss
2// Re-export variables, mixins, and functions as a single public API
3@forward "variables";
4@forward "mixins";
5@forward "functions";

• Sadece bu index dosyasını dışa açarak, iç yapıyı gizleyebilir ve tüketiciler için kullanıcı dostu bir arayüz sunabilirsiniz.

İsim çakışmalarını önleme (as)

Aynı değişken veya mixin isimleri birden fazla modülde tanımlanmışsa, @forward ile as belirterek dışa aktarırken isimlerin başına bir önek ekleyip çakışmaları önleyebilirsiniz.

1// Add a prefix when re-exporting to avoid name collisions
2@forward "variables" as var-*;

Bu kod ile variables içindeki $primary-color şu isimle dışa aktarılacaktır:.

1// foundation.$var-primary-color

• Bu yöntem, tasarım kurallarını net bir şekilde tanımlamanın ve güvenli bir şekilde ölçeklemenin bir yoludur ve özellikle büyük ölçekli projelerde veya paylaşılan kütüphanelerde temel bir tekniktir.

Gereksiz üyeleri gizleme (hide)

Modüller yalnızca iç uygulama için tasarlanmış değişkenler veya mixinler içerebilir. hide kullanarak, tekrar dışa aktarırken bunları hariç tutabilir ve dışarıdan erişimi engelleyebilirsiniz.

1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;

Bu yapılandırma ile $debug-color sadece modül içinde geçerlidir ve tüketicilerin yanlışlıkla kullanmasını engellemeye yardımcı olur.

Hangi üyelerin dışa aktarılacağını belirtme (show)

Sadece belirli mixinleri veya fonksiyonları dışa aktarmak istiyorsanız, show kullanın. Açığa çıkarılanları sınırlayarak, modülün amacını ve tasarım niyetini netleştirebilirsiniz.

1// Explicitly expose only selected mixins as the public API
2@forward "mixins" show button-reset, clearfix;

• Bu şekilde show kullanarak, hangi API'lerin resmi olarak kullanıma açık olduğu hemen anlaşılır.

@forward tek başına kullanılamaz

Önemli bir nokta, @forward edilen değişkenlerin o dosyanın içinde kullanılamayacağıdır.

1@forward "variables";
2
3.test {
4  color: $primary-color; // Error
5}

• @forward sadece 'tekrar dışa aktarmak' içindir, 'kullanmak' ise @use'un görevidir.

Uygun görev ayrımına bir örnek

Sass için modül tasarımında, genel arayüz katmanı (API) ile uygulama katmanını net bir şekilde ayırmak idealdir. @forward genel API'yi tanımlar, @use ise bunu uygulama tarafında kullanır.

1// _index.scss (public API)
2@forward "variables";
3@forward "mixins";

1// _component.scss
2// Consume the public API of the foundation layer
3@use "foundation";
4
5.card {
6  color: foundation.$primary-color;
7}

• Bu yapı ile hangi bölümlerin genel arayüz, hangilerinin iç uygulama olduğu netleşir ve bu da daha iyi bir tasarım şeffaflığı sağlar.

@import ile kesin farkı

@import tüm içe aktarılan tanımları küresel alana genişletir. Öte yandan, @use ve @forward öğeleri açıkça dışa aktarır ve ad alanları aracılığıyla erişilmesini sağlar.

 1// @import (deprecated)
 2// Everything is injected into the global scope
 3$color: red;
 4
 5.button-import {
 6  color: $color;
 7}
 8
 9// @use + @forward (recommended)
10// Access values explicitly through a namespace
11@use "foundation";
12
13.button-use {
14  color: foundation.$primary-color;
15}

• Bu fark sayesinde, beklenmeyen üzerine yazmaları ve bağımlılık karışıklıklarını önleyerek bakım kolaylığını ve güvenliğini büyük ölçüde artırabilirsiniz.

Özet

@forward, bakımı kolay bir tasarımı destekleyen önemli bir özelliktir. 'Neyi dışa aktaracağınız ve neyi iç uygulama olarak gizleyeceğiniz' konusunda özen göstererek, stil yapınız daha güvenli ve okunabilir olur. @use ve @forward'ı doğru kullanarak, bağımlılıkları netleştirebilir ve değişime karşı sağlam bir tasarım elde edebilirsiniz.

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

YouTube Video