SASS মডিউলসমূহ

এই নিবন্ধে SASS মডিউল ব্যাখ্যা করা হয়েছে।

@use এবং @forward ব্যবহার করে কীভাবে SASS কে মডুলারে বিভক্ত করা যায়, এবং কীভাবে ভেরিয়েবল, মিক্সিন, ফাংশন, থিম সেটিংস ও পাবলিক API পুনঃব্যবহার করা যায় তা আমরা ব্যাখ্যা করি।

YouTube Video

SASS মডিউলসমূহ

SASS-এর মডিউল সিস্টেম স্টাইলগুলোকে পরিষ্কারভাবে নির্ধারণ করতে এবং সহজে পুনঃব্যবহার ও রক্ষণাবেক্ষণযোগ্য একটি ডিজাইন প্রদান করতে সহায়তা করে।

মডিউলের মৌলিক ধারণা

SASS মডিউলসমূহ পুরাতন @import-এ থাকা গ্লোবাল নেমস্পেস সমস্যা ও অস্পষ্ট নির্ভরতাসমূহের সমাধান করে। প্রতিটি ফাইল নিজস্ব নেমস্পেসসহ একটি মডিউল হিসেবে লোড হয় এবং কেবলমাত্র স্পষ্টভাবে এক্সপোর্ট করা আইটেমগুলো অন্যান্য ফাইল থেকে অ্যাক্সেসযোগ্য হয়।

ফাইল স্ট্রাকচারের উদাহরণ

প্রথমেই, এখানে একটি বাস্তব প্রকল্প গঠনের উদাহরণ দেওয়া হলো। নিচে একটি ছোট ডিজাইন সিস্টেমের উদাহরণ দেওয়া হয়েছে।

 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

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

@use এর মৌলিক বিষয়

@use একটি মডিউল লোড করে এবং একটি নেমস্পেস সরবরাহ করে। এটি নামের সংঘাত প্রতিরোধ করে এবং সোর্স মডিউলটিকে স্পষ্ট করে তোলে।

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

• এই ফাইলটি খুব সহজ, এতে কেবলমাত্র ভ্যারিয়েবল সংজ্ঞায়িত করা হয়েছে। একটি মডিউল থেকে প্রকাশিত ভ্যারিয়েবল @use ব্যবহার করে সরাসরি রেফারেন্স করা যায়।

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

• এখানে variables মডিউলটি variables. নেমস্পেস দিয়ে রেফারেন্স করা হয়েছে। এই পদ্ধতিতে প্রতিটি আইটেমের উৎস স্পষ্ট হয়।

নেমস্পেস সংক্ষিপ্তকরণ বা ছদ্মনাম (এলিয়াস) ব্যবহার

as ব্যবহার করে আপনি নেমস্পেস সংক্ষিপ্ত করতে পারেন।

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

• এটি হলো সংক্ষিপ্ত এলিয়াস vars ব্যবহার করে variables ইম্পোর্ট করার একটি উদাহরণ। আপনি পড়তে সুবিধা গুরুত্ব দেবেন নাকি লেখার সহজতা গুরুত্ব দেবেন, তার ওপর ভিত্তি করে নাম নির্বাচন করুন।

মিক্সিন সংজ্ঞা

মিক্সিন ও ফাংশনগুলো মডিউলের ভিতরে সংজ্ঞায়িত ও ব্যবহৃত হতে পারে। প্রকল্পের নিয়ম অনুযায়ী মন্তব্য লিখলে বোধগম্যতা বাড়ে।

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}

• এই ফাইলটি কনটেইনারের জন্য একটি মিক্সিন সংজ্ঞায়িত করে। এটি আর্গুমেন্ট গ্রহণ করে এবং ডিফল্ট মান নির্ধারণ করে।

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

• এটি হলো @include দিয়ে মিক্সিন ব্যবহারের এক উদাহরণ।

ফাংশন সংজ্ঞায়িত করা

ফাংশন মান ফেরত দিতে ব্যবহৃত হয় এবং এগুলো মডিউলের মধ্যে সংজ্ঞায়িত ও পুনঃব্যবহার করা যায়। ডিজাইনের মানের জন্য গণনাকে ফাংশনে আবদ্ধ করার ফলে স্টাইল আরও স্থিতিশীল এবং সহজেই রক্ষণাবেক্ষণযোগ্য হয়।

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}

• এই ফাইলটি একটি ফাংশন সংজ্ঞায়িত করে যা পিক্সেল মানকে রেম-এ রূপান্তর করে। এখানে একটি ডিফল্ট বেস মানও নির্দিষ্ট করা হয়েছে।

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

• এখানে @use ব্যবহারের মাধ্যমে ফাংশন কল করার এবং ফলাফলটি স্টাইলে প্রয়োগ করার একটি উদাহরণ দেওয়া হলো।

মডিউল এক্সপোর্ট এবং @forward (API ডিজাইন)

আপনি যখন একাধিক অভ্যন্তরীণ ফাইল বাইরে প্রকাশ করতে চান, তখন @forward ব্যবহার করে 'পাবলিক API' তৈরি করতে পারেন।

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

• একাধিক অভ্যন্তরীণ ফাইলকে একক এন্ট্রি পয়েন্ট হিসেবে একত্র করা যায়, যা পরবর্তীতে পাবলিক API সরবরাহ করে। এর ফলে ব্যবহারকারী শুধুমাত্র একটি এন্ট্রি পয়েন্ট ইম্পোর্ট করেই সকল প্রয়োজনীয় ফিচার পেতে পারেন।

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 এবং mixins এর বিষয়বস্তু সমষ্টিগতভাবে index এর মাধ্যমে অ্যাক্সেস করা হয়। @forward এর মাধ্যমে index-কে পাবলিক লেয়ার হিসেবে নির্ধারণ করা হয়।

@forward এর show/hide অপশনসমূহ দিয়ে API নিয়ন্ত্রণ

শুধুমাত্র নির্দিষ্ট ভ্যারিয়েবল প্রকাশ করতে চাইলে show অথবা hide অপশন ব্যবহার করুন।

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

• !default যোগ করলে এমন মান প্রকাশ করা যায় যা পরে ওভাররাইট করা যেতে পারে।

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

• @forward এর সাথে show ব্যবহার করে আপনি শুধু প্রয়োজনীয় আইটেমগুলো API-তে প্রকাশ করতে পারেন। অভ্যন্তরীণভাবে ব্যবহৃত ভ্যারিয়েবল ও ফাংশন বাইরে থেকে দেখা যাবে না।

মডিউল কনফিগারযোগ্য করা ( with দিয়ে )

মডিউলে !default ব্যবহার করলে, ইম্পোর্ট করার সময় with ব্যবহার করে মান ওভাররাইট করা যাবে।

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 দ্বারা ডিফল্ট মান নির্ধারিত মডিউলে with এর মাধ্যমে কনফিগারেশন গ্রহণ করা যায়।

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 তে with ব্যবহার করলে ইম্পোর্ট করার সময় মডিউলের ডিফল্ট ভ্যারিয়েবল ওভাররাইট করা যায়। এটি থিম পরিবর্তনের জন্য খুবই কার্যকর।
• মনে রাখবেন, with কেবলমাত্র ইম্পোর্ট করার সময়ই কার্যকর হয়— পরে আর মান পরিবর্তন করা যায় না।

প্রায়োগিক উদাহরণ: বাটন কম্পোনেন্ট (সম্পূর্ণ উদাহরণ)

চলুন, মডিউল ব্যবহার করে বাটনের স্টাইল ডিজাইন করি। প্রথমে, ভ্যারিয়েবল ও মিক্সিনগুলো আলাদা মডিউলে ভাগ করুন।

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;

• এখানে বাটনের জন্য ডিফল্ট ভ্যারিয়েবল নির্ধারণ করা হয়েছে। !default ব্যবহারে গ্রাহকরা এগুলোর মান ওভাররাইট করতে পারেন।

 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}

• এখানে বাটনের জন্য বেসিক মিক্সিন সংজ্ঞায়িত করা হয়েছে। সহজ পুনঃব্যবহারের জন্য এগুলো আলাদা করা হয়েছে।

 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}

• @use দিয়ে নেমস্পেস রেফারেন্স ব্যবহার করে বাটন স্টাইল তৈরি করা হয়েছে। একটি ভ্যারিয়েন্ট .button--large হিসাবে নির্ধারণ করা হয়েছে।

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

• button মডিউল ইম্পোর্ট করে সঙ্গে সঙ্গেই বাটন স্টাইল ব্যবহার করা যায়।

থিম বদলানো (একাধিক থিম ফাইল ব্যবহার করে)

থিম বদলানো যায় with ব্যবহার করে কনফিগারেশনের মাধ্যমে বা আলাদা মডিউল তৈরি করে এবং কোনটি @use করবেন তা পরিবর্তন করে।

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

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

• ব্র্যান্ড কালার ও অন্যান্য সেটিংস একাধিক থিম ফাইলে সংজ্ঞায়িত করুন এবং বিল্ড বা ইম্পোর্ট করার সময় সেগুলো পরিবর্তন করুন।

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

• থিম নির্বাচন করতে with বা সরাসরি ইম্পোর্ট যেমন: @use 'themes/light' বিল্ড প্রসেসে ব্যবহার করুন।

প্রাইভেট ও পাবলিক (প্রিফিক্স _ এবং !default)

SASS-এ, ফাইল নামের শুরুতে আন্ডারস্কোর যোগ করলে সেটিকে পার্শিয়াল হিসেবে চিহ্নিত করা হয়। তবে, মডিউল এক্সপোর্ট দৃশ্যমানতা নিয়ন্ত্রণের জন্য @forward এর সাথে show ও hide ব্যবহার করুন।

@forward ব্যবহার করে পাবলিক API গুছিয়ে নিতে পারেন এবং অভ্যন্তরীণ বিষয়বস্তু বাহির থেকে আড়াল করতে পারেন।

বাস্তব জীবনের জন্য সেরা অনুশীলনসমূহ

নিচে কিছু মৌলিক ধারণা দেয়া হলো, যা SASS ব্যবহার করার সময় প্রায়োগিক ক্ষেত্রে উপকারী। এই নির্দেশনাগুলো ডেভেলপমেন্টের সময় বিভ্রান্তি কমিয়ে কোড সুসংগঠিত রাখতে সহায়তা করবে।

• ভ্যারিয়েবলগুলো থিম হিসেবে পরিবর্তিত হতে পারে মনে হলে !default যোগ করুন। এটি ব্যবহারকারীদের জন্য মান ওভাররাইড করা আরও সহজ করে দেয়।
• মডিউলগুলো দায়িত্ব অনুযায়ী ভাগ করা উচিত এবং একটি নির্দিষ্ট লক্ষ্যকেই গুরুত্ব দিতে হবে। ভেরিয়েবল, মিক্সিন এবং কম্পোনেন্ট আলাদাভাবে ব্যবস্থাপনা করলে তা আরও সহজ হয়।
• @forward দিয়ে পাবলিক বিষয়বস্তু ম্যানেজ করুন এবং প্রয়োজনে show ও hide ব্যবহার করুন। পাবলিক কী, তার পরিসর নির্ধারণ করলে ডিজাইন আরও নিরাপদ হয়।
• প্রত্যেক ফাংশন কোন মডিউলের তা স্পষ্ট করতে নেমস্পেস ব্যবহার করুন। এতে অন্যান্য কোডের সঙ্গে বিভ্রান্তি এড়ানো যায়।
• মনে রাখবেন, with কেবলমাত্র @use করার সময়ই কার্যকর। যেহেতু এগুলো পরে পরিবর্তন করা যায় না, তাই ইম্পোর্ট করার সময় কনফিগারেশন সেট করুন।
• ফাইলনামের শুরুতে আন্ডারস্কোর দিন, যাতে সেগুলো পার্সিয়াল হয় এবং আলাদাভাবে কম্পাইল না হয়। এতে ফাইলগুলোকে বড় স্ট্রাকচারে একত্র করা সহজ হয়।
• index মডিউলে ব্যবহারের উদাহরণ অন্তর্ভুক্ত করলে টেস্টিং ও ডকুমেন্টেশনে সহায়ক হয়। এতে ব্যবহারকারীদের জন্য আচরণ বুঝতে সহজ হয়।

এই বিষয়গুলো মাথায় রাখলে বড় প্রকল্প পরিচালনা ও টিম হিসেবে পাঠযোগ্য কোড রক্ষা সহজ হয়।

সারসংক্ষেপ

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

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

YouTube Video