SASS এ `@forward`

এই আর্টিকেলটিতে SASS-এ @forward সম্পর্কে ব্যাখ্যা করা হয়েছে।

@forward-এর সহজবোধ্য ব্যাখ্যা এবং ব্যবহারিক উদাহরণসহ ব্যাখ্যা করব।

YouTube Video

SASS এ @forward

@forward কী?

SASS-এর মডিউল সিস্টেমে, আপনি @import-এর পরিবর্তে @use এবং @forward ব্যবহার করেন। @forward আপনার স্থাপত্যকে পরিষ্কার রাখতে একটি গুরুত্বপূর্ণ ফিচার। এটি এমন একটি নির্দেশনা যা অন্য ফাইলে সংজ্ঞায়িত ভেরিয়েবল, মিক্সিন এবং ফাংশনগুলোকে 'উন্মুক্ত' করতে ব্যবহৃত হয়। এটি নিজে ব্যবহার না হয়ে, এন্ট্রি পয়েন্ট হিসেবে কাজ করে, যেখানে বলা হয়, 'এই মডিউলটি এখান থেকে ব্যবহার করুন।'।

1@forward "variables";

• এই কোডটির অর্থ হচ্ছে 'variables.scss-এর কনটেন্টকে অন্যান্য ফাইল থেকে ব্যবহারের জন্য উন্মুক্ত করা।'।

@use এবং @forward -এর মধ্যে পার্থক্য

@use এবং @forward উভয়ই মডিউল ব্যবহারের সিনট্যাক্স, তবে তাদের উদ্দেশ্য স্পষ্টভাবে আলাদা। @use হলো ফাইলের ভিতরের এলিমেন্ট ব্যবহারের নির্দেশ, আর @forward হলো এলিমেন্টগুলোকে অন্য ফাইলের জন্য উন্মুক্ত করার নির্দেশ।

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 নির্দিষ্ট ফাইল ইমপ্লিমেন্টেশনের জন্য প্রয়োজনীয় নির্ভরশীলতা নির্দেশ করে, অন্যদিকে @forward ফাইলটিকে পাবলিক API এন্ট্রি পয়েন্ট হিসেবে কাজ করায়। এই পার্থক্য বোঝা আপনাকে কোথায় @forward ব্যবহার করবেন তা নির্ধারণে সাহায্য করবে।

@forward কেন দরকার?

আপনি যখন আরও Sass ফাইল যোগ করবেন, তখন অনেকগুলো @use স্টেটমেন্ট লিখতে হতে পারে। @forward ব্যবহার করে, আপনি সবকিছু একক এন্ট্রি ফাইলে কেন্দ্রীভূত করতে পারেন।

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

• এই গঠনে, _index.scss 'পাবলিক API' হিসেবেই কাজ করে।

@forward -এর মৌলিক ব্যবহার

চলুন, @forwardএর মৌলিক ব্যবহার দেখি।

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;

• এই ভেরিয়েবলটি সরাসরি @use করার পরিবর্তে, আপনি @forward দিয়ে এগুলো গ্রুপ করেন।

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

• এই পর্যায়ে, _index.scss-এ কিছু নেই; এটি একটি রিলেই ফাইল মাত্র।

@forward-করা মডিউল ব্যবহার

ব্যক্তিগত ফাইলগুলিকে সরাসরি @use করার পরিবর্তে, কনজিউমার পাশে আপনি কেবলমাত্র সেই ইন্ডেক্স ফাইলটি @use করেন, যেটিতে সব @forward একত্রিত করা হয়েছে। এতে আপনি ইন্টারনাল স্ট্রাকচারের কথা চিন্তা না করেই একে একটি স্থিতিশীল ইন্টারফেস হিসেবে ব্যবহার করতে পারবেন।

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}

• এই ডিজাইনে, ভেরিয়েবল বা মিক্সিনের সংজ্ঞা স্থান পরিবর্তিত হলেও, কনজিউমার পাশে কোনো কোড পরিবর্তন ছাড়াই ইন্টারনাল স্ট্রাকচার পরিবর্তন করা যায়।

@forward দিয়ে একাধিক মডিউল একত্রিত করা

বাস্তব ডেভেলপমেন্টে, সাধারণত ভেরিয়েবল, মিক্সিন এবং ফাংশনগুলোকে তাদের ভূমিকানুযায়ী ভাগ করা হয়ে থাকে। @forward একাধিকবার ব্যবহার করা যায়, যার মাধ্যমে আপনি পৃথক মডিউলসমূহকে একটি একক পাবলিক API-তে একত্রিত করতে পারেন।

নিচে, আমরা মিক্সিন ও ফাংশনের উদাহরণ দিয়েছি এবং দেখিয়েছি কীভাবে একটিমাত্র ইন্টারফেস হিসেবে এগুলোকে বাহিরে উন্মুক্ত করা যায়।

 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";

• শুধুমাত্র এই index ফাইলটি বাইরে প্রকাশ করে, আপনি ইন্টারনাল স্ট্রাকচার লুকিয়ে রেখে কনজিউমারদের জন্য সহজ ইন্টারফেস দিতে পারেন।

নাম দ্বন্দ্ব প্রতিরোধ (as)

যদি একই নামের ভেরিয়েবল বা মিক্সিন একাধিক মডিউলে থাকে, তাহলে @forward-এ as ব্যবহার করে প্রকাশের সময় prefix যোগ করে নাম দ্বন্দ্ব প্রতিরোধ করা যায়।

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

এই কোডের মাধ্যমে, variables-এর $primary-color নিচের নামে প্রকাশিত হবে:।

1// foundation.$var-primary-color

• এই কৌশলটি হল পরিষ্কারভাবে ডিজাইন নিয়ম সংজ্ঞায়িত ও নিরাপদে স্কেল করার উপায়, এবং বড় প্রকল্প বা শেয়ার্ড লাইব্রেরিতে এটি অত্যাবশ্যক।

অপ্রয়োজনীয় সদস্য লুকানো (hide)

মডিউলগুলোতে শুধুমাত্র ইন্টারনাল ইমপ্লিমেন্টেশনের জন্য নির্ধারিত ভেরিয়েবল বা মিক্সিন থাকতে পারে। hide ব্যবহার করে, পুনরায় প্রকাশের সময় এগুলো বাদ দিতে পারবেন এবং বাইরের অ্যাক্সেস প্রতিরোধ করা যাবে।

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

এই কনফিগারেশনে, $debug-color শুধুমাত্র মডিউলের ভিতরে বৈধ, ফলে কনজিউমারদের ভুলে ব্যবহার থেকে রক্ষা পাওয়া যায়।

কোন সদস্য প্রকাশ করা হবে নির্ধারণ (show)

শুধুমাত্র নির্দিষ্ট মিক্সিন বা ফাংশন প্রকাশ করতে চাইলে, show ব্যবহার করুন। কী কী উন্মুক্ত করা হবে তা সীমিত করে দিয়ে, আপনি মডিউলের উদ্দেশ্য এবং ডিজাইনের লক্ষ্য আরো স্পষ্ট করতে পারেন।

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

• এভাবে show ব্যবহার করলে, এক নজরেই বোঝা যাবে কোন API-গুলো অফিসিয়ালি ব্যবহারের জন্য উন্মুক্ত।

@forward নিজে নিজে ব্যবহার করা যায় না

একটি গুরুত্বপূর্ণ বিষয় হচ্ছে, @forward-করা ভেরিয়েবলগুলি ফাইলের ভিতরে ব্যবহার করা যায় না।

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

• ‘পুনরায় প্রকাশ’ শুধুমাত্র @forward-এর জন্য, আর 'ব্যবহার' হল @use-এর কাজ।

উপযুক্ত ভূমিকা বিভাজনের উদাহরণ

Sass-এর মডিউল ডিজাইনে, পাবলিক লেয়ার (API) এবং ইমপ্লিমেন্টেশন লেয়ার স্পষ্টভাবে ভাগ করা শ্রেয়। @forward পাবলিক API নির্ধারণ করে, এবং @use ইমপ্লিমেন্টেশন পাশ থেকে সেটি ব্যবহার করে।

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}

• এই স্ট্রাকচারে, কোন অংশ পাবলিক ইন্টারফেস ও কোন অংশ ইন্টারনাল ইমপ্লিমেন্টেশন তা স্পষ্ট হয়, ফলে ডিজাইন আরও স্বচ্ছ হয়।

@import থেকে মূল পার্থক্য

@import সকল ইম্পোর্ট করা ডেফিনিশনকে গ্লোবাল স্কোপে ছড়িয়ে দেয়। অন্যদিকে, @use এবং @forward আইটেমগুলো স্পষ্টভাবে প্রকাশ করে ও নেমস্পেসের মাধ্যমে অ্যাক্সেস করে।

 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}

• এই কারণে, অনিচ্ছাকৃত ওভাররাইট ও নির্ভরতা বিভ্রান্তি প্রতিরোধ করে রক্ষণাবেক্ষণযোগ্যতা ও নিরাপত্তা অনেক বাড়ানো যায়।

সারসংক্ষেপ

@forward হলো রক্ষণাবেক্ষণযোগ্য ডিজাইনকে সমর্থনকারী একটি গুরুত্বপূর্ণ বৈশিষ্ট্য। 'কী প্রকাশ করবেন এবং কী ইন্টারনাল হিসেবে লুকাবেন'—এটি মাথায় রাখার মাধ্যমে আপনার স্টাইল স্ট্রাকচার আরও নিরাপদ ও পাঠযোগ্য হবে। @use এবং @forward যথাযথভাবে ব্যবহার করে, আপনি নির্ভরশীলতা স্পষ্ট করতে পারবেন এবং পরিবর্তনের মুখেও কার্যকর ডিজাইন বজায় থাকব।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video