স্যাসে `!default` ফ্ল্যাগ

এই প্রবন্ধে SASS-এ !default পতাকা ব্যাখ্যা করা হয়েছে।

আমরা বিস্তারিতভাবে !default পতাকা ব্যাখ্যা করব এবং ব্যবহারিক উদাহরণ দিয়ে দেখাব কিভাবে এটি ব্যবহার করতে হয়।

YouTube Video

স্যাসে !default ফ্ল্যাগ

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

!default ফ্ল্যাগটি স্যাসের একটি বিশেষ বৈশিষ্ট্য, যা ভ্যারিয়েবলের জন্য ডিফল্ট মান নির্ধারণ করতে ব্যবহৃত হয়। এই ফ্ল্যাগ যোগ করলে নিচের আচরণ পাওয়া যাবে:।

• ডিফল্ট মান নির্ধারণ শুধুমাত্র সেই ক্ষেত্রে মান নির্ধারণ করা হয় যদি ভ্যারিয়েবলটি অন্যত্র সংজ্ঞায়িত না থাকে।

• অগ্রাধিকার নিয়ন্ত্রণ যদি ভ্যারিয়েবলটি পূর্বেই সংজ্ঞায়িত থাকে, তাহলে তার মান ওভাররাইট হবে না।

মডিউল এবং লাইব্রেরি তৈরি করার সময় এই বৈশিষ্ট্যটি বিশেষভাবে উপকারী। ইউজাররা ইচ্ছা করলে কাস্টম মান নির্ধারণ করতে পারেন, তবে কিছু নির্ধারণ না করলে ডিফল্ট মান ব্যবহৃত হবে।

প্রাথমিক উদাহরণ

নিম্নের কোডটি !default ফ্ল্যাগের মৌলিক ব্যবহার দেখাচ্ছে।

1// _variables.scss
2$primary-color: blue !default;

• ডিফল্ট ভেরিয়েবল $primary-color-কে !default পতাকা ব্যবহার করে সংজ্ঞায়িত করা হচ্ছে।

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• @use ব্যবহার করে ভেরিয়েবলগুলি আমদানি করা এবং with দিয়ে $primary-color ওভাররাইড করা হচ্ছে।

আউটপুট CSS

1body {
2    background-color: red;
3}

• এই উদাহরণে, main.scss-এ $primary-color কে red হিসেবে সেট করায়, _variables.scss-এ সংজ্ঞায়িত blue ব্যবহার করা হবে না।

যখন কোন ভ্যারিয়েবল সংজ্ঞায়িত নয়

যদি main.scss-এ ভ্যারিয়েবল নির্ধারণ করা না থাকে, তাহলে ডিফল্ট মান ব্যবহৃত হবে।

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• ভেরিয়েবলটি ওভাররাইড ছাড়া আমদানি করা হয়েছে, তাই _variables.scss-এ সংজ্ঞায়িত $primary-color-এর ডিফল্ট মান blue প্রয়োগ করা হয়েছে।

আউটপুট CSS

1body {
2    background-color: blue;
3}

নেস্টেড মডিউলে ব্যবহার

মডিউলের মধ্যে !default ব্যবহার করলে সহজে কাস্টমাইজ করার সুবিধা পাওয়া যায়।

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• !default পতাকা ব্যবহার করে $primary-color এবং $button-color সংজ্ঞায়িত করা হচ্ছে।

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• variables মডিউলটি আমদানি করে এবং $button-color ভেরিয়েবল ব্যবহার করে .button-এর রঙ নির্ধারণ করা হচ্ছে।

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• @use এবং with ব্যবহার করে $button-color-কে orange দিয়ে ওভাররাইড করা হচ্ছে, এবং buttons মডিউলটি ব্যবহৃত হচ্ছে।

আউটপুট CSS

1.button {
2    color: orange;
3}

• এভাবে মডিউলগুলো ইউজার নির্ধারিত সেটিং-এর প্রতি সম্মান রেখে ডিফল্ট মান প্রদান করতে পারে।

মনে রাখার বিষয়সমূহ

!default ফ্ল্যাগ ব্যবহার করার সময় নিচের বিষয়গুলো বিবেচনা করা উচিত:।

• উপযুক্ত ডিফল্ট মান নির্বাচন ডিফল্ট মান এমনভাবে নির্বাচন করা উচিত যাতে তা সাধারণ ব্যবহারের অধিকাংশ ক্ষেত্রে প্রযোজ্য হয়।

• উদ্দেশ্যমূলক ডিজাইন একই ধরনের ভ্যারিয়েবল নাম ব্যবহার করুন এবং অন্যান্য মডিউলের সাথে সংঘাত এড়ান।

• ক্রম যাচাই !default ফ্ল্যাগ সঠিকভাবে কাজ করার জন্য ভ্যারিয়েবল ওভাররাইড-এর ক্রম যথাযথভাবে নিয়ন্ত্রন করতে হবে।

ব্যবহারিক পরিস্থিতিসমূহ

থিম স্বয়ংক্রিয়ভাবে পরিবর্তন

উদাহরণস্বরূপ, কোনো থিম সমর্থিত লাইব্রেরি তৈরি করলে !default ব্যবহার করে কাস্টমাইজযোগ্য ডিফল্ট মান নির্ধারণ করতে পারেন।

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}

• থিমের জন্য !default পতাকা দিয়ে $background-color এবং $text-color সংজ্ঞায়িত করা হচ্ছে এবং সেগুলো body-তে প্রয়োগ করা হচ্ছে।

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• @use এবং with ব্যবহার করে $background-color ওভাররাইড করে থিম কাস্টমাইজ করা হচ্ছে।

আউটপুট CSS

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

পুনঃব্যবহারযোগ্য কম্পোনেন্ট

একটি পুনঃব্যবহারযোগ্য বাটন কম্পোনেন্টে, আপনি ডিফল্ট স্টাইল নির্ধারণ করতে পারেন এবং ইউজার চাইলে রঙ ওভাররাইড করতে পারবেন।

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}

• !default ব্যবহার করে বাটনের ডিফল্ট ব্যাকগ্রাউন্ড ও টেক্সট রঙ সংজ্ঞায়িত করা এবং স্টাইল প্রয়োগ করা হচ্ছে।

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• @use এবং with ব্যবহার করে $button-bg ওভাররাইড করে বাটনের রঙ কাস্টমাইজ করা হচ্ছে।

আউটপুট CSS

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

!default ফ্ল্যাগের সারাংশ

স্যাসের !default ফ্ল্যাগ মডিউল ও লাইব্রেরি তৈরিতে একটি শক্তিশালী টুল। এটি পুনঃব্যবহারযোগ্যতা বৃদ্ধি করে এবং নমনীয় কাস্টমাইজেশন সম্ভব করে তোলে।

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

YouTube Video