SASS-এ অপারেটরসমূহ

এই প্রবন্ধে SASS-এ অপারেটরগুলো ব্যাখ্যা করা হয়েছে।

আমরা SASS-এ অপারেটরসমূহ ব্যবহারিক উদাহরণের মাধ্যমে ব্যাখ্যা করব।

YouTube Video

SASS-এ অপারেটরসমূহ

SASS অপারেটরগুলির মধ্যে রয়েছে সংখ্যাগত অপারেশন, তুলনামূলক অপারেশন, লজিক্যাল অপারেশন, এবং স্ট্রিং ম্যানিপুলেশন।

গাণিতিক অপারেশন (যোগ, বিয়োগ, গুণ, ভাগ, ভাগশেষ)

SASS সাধারণ গাণিতিক অপারেশন সমর্থন করে, তবে ভাগ / CSS এর /-এর সাথে বিভ্রান্তিকর হতে পারে, তাই math.div() ব্যবহার করার পরামর্শ দেয়া হয়। সংখ্যাগুলোর একক থাকতে পারে এবং অপারেশন শুধুমাত্র সামঞ্জস্যপূর্ণ এককের মধ্যে সম্ভব।

নিচে সহজ গাণিতিক অপারেশন ও math মডিউলের ব্যবহারের উদাহরণ দেওয়া হলো।

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• এই কোডটি px এককের সাথে যোগ ও গুণের এবং math.div() ব্যবহার করে ভাগ করার উদাহরণ।
• 10px + 2em-এর মত অসামঞ্জস্যপূর্ণ ইউনিট ব্যবহার করলে ত্রুটি বা অপ্রত্যাশিত ফলাফল হতে পারে। ইউনিট統一করুন বা unit() ও unitless() ফাংশন ব্যবহার করুন।

ইউনিটসমূহের ব্যবস্থাপনা ও স্বয়ংক্রিয় রূপান্তর

SASS ইউনিটসহ সংখ্যাগুলো পরিচালনা করে, এবং ফলাফলের ইউনিট সাধারণ পদার্থবিদ্যার নিয়ম অনুসরণ করে। উদাহরণস্বরূপ, px/px ইউনিট-ছাড়া মান হয়ে যায়। unit() ফাংশন অথবা math.div() ব্যবহার করার সময় ইউনিট ব্যবস্থাপনায় সতর্ক থাকুন।

নীচে ইউনিট এবং ইউনিট-বিহীন মান মিশ্রণের ব্যবস্থাপনা দেখানো হয়েছে।

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• ইউনিটসহ এবং ইউনিট-বিহীন মান গুণ করলে প্রত্যাশিতভাবে কাজ করে, তবে ভাগ করার সময় ফলাফলের ইউনিট নিয়ে সতর্ক থাকুন।

তুলনা অপারেটরসমূহ (==, !=, <, >, <=, >=)

SASS-এ তুলনা অপারেটর আছে, যা শর্তাধীন শাখা (@if) ও মিক্সিনে ব্যবহার করা যায়। রঙ এবং তালিকার মতো জটিল ধরনগুলোর তুলনা তাদের নিজস্ব নিয়ম অনুসরণ করে। মনে রাখুন, কালার স্পেস অনুযায়ী রঙের তুলনা ভিন্ন হতে পারে।

নিচে দুটি সংখ্যার তুলনা করে স্টাইল শাখা করার একটি উদাহরণ দেওয়া হয়েছে।

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• প্রতিক্রিয়াশীল ও শর্তাধীন স্টাইল নিয়ম তৈরিতে @if-এর সাথে তুলনা অপারেটরগুলো মিলিয়ে ব্যবহার করা যায়।

লজিক্যাল অপারেশনসমূহ (and, or, not)

SASS-এ and, or, এবং not সমর্থিত। and/or ব্যবহার করে একাধিক শর্ত যুক্ত করুন। ব্র্যাকেট ব্যবহার করলে অগ্রাধিকার ও নির্ণয়ক্রম স্পষ্ট করা যায়।

নিচে লজিক্যাল অপারেটর ব্যবহার করে জটিল শর্তের ব্যবস্থাপনার উদাহরণ দেওয়া হয়েছে।

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• and এবং or-এর অগ্রাধিকার ব্র্যাকেট ব্যবহার করে স্পষ্ট করা যায়। জটিল শর্তের ক্ষেত্রে, ব্র্যাকেট ব্যবহার করলে পাঠযোগ্যতা ও নিরাপত্তা নিশ্চিত হয়।

স্ট্রিং অপারেশন - সংযোজন ও ইন্টারপোলেশন

SASS-এ, স্ট্রিং জোড়ার জন্য + অথবা #{} ইন্টারপোলেশন ব্যবহার করা যায়। + অপারেটরের ফলাফল বাম পাশের স্ট্রিং কোটেড নাকি আনকোটেড তার উপর নির্ভর করে, তাই পূর্বানুমানযোগ্য #{} ইন্টারপোলেশন ব্যবহার করাই নিরাপদ।

নিচে স্ট্রিং সংযোজন ও ইন্টারপোলেশনের উদাহরণ দেওয়া আছে।

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• #{} ইন্টারপোলেশন ব্যবহারে কোট এবং অনাকাঙ্ক্ষিত ফাঁকা স্থান সমস্যার সমাধান হয়।

রঙের গাণিতিক অপারেশন (ডিপ্রিকেটেড)

আগে SASS-এ 'color arithmetic' বিদ্যমান ছিল, যা রঙের সাথে সংখ্যা যোগ বা বিয়োগ করার সুবিধা দিত। তবে এখন সেটি বাতিল করা হয়েছে, তাই রঙ ম্যানিপুলেশনের জন্য sass:color মডিউলের ফাংশনগুলো ব্যবহার করুন।

নিচে সরাসরি রঙের ওপর গণনা ডিপ্রিকেটেড এবং বিকল্প ব্যবহার দেখানো হয়েছে।

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• যদি আপনি রঙ ম্যানিপুলেট করতে চান, তবে sass:color মডিউলের ফাংশনগুলো ব্যবহার করুন।

ব্র্যাকেট ও অপারেটরের অগ্রাধিকার

অপারেশনের নির্ণয়ক্রম নিয়ন্ত্রণে ব্র্যাকেট ব্যবহার করুন। ব্র্যাকেটের ভেতরের অপারেশন বাইরে অপারেশনের আগে সম্পন্ন হয়। জটিল এক্সপ্রেশনে ব্র্যাকেট ব্যবহার করলে পাঠযোগ্যতা বজায় থাকে।

নিচে ব্র্যাকেট দিয়ে নির্ণয়ক্রম স্পষ্ট করার উদাহরণ দেওয়া হয়।

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• গণিতের মতো, এখানে অগ্রাধিকার নিয়ম প্রযোজ্য, তাই নির্দিষ্ট ক্রমে গণনা নিশ্চিত করতে ব্র্যাকেট ব্যবহার করুন।

সারসংক্ষেপ

SASS-এ অপারেটর ব্যবহারের সময় ভবিষ্যৎ সামঞ্জস্যতা ও পাঠযোগ্যতা মাথায় রেখে কোড লেখা জরুরি। জটিল এক্সপ্রেশনে, গণনার ক্রম স্পষ্ট করতে ব্র্যাকেট ব্যবহার করুন এবং কোডের পাঠযোগ্যতা অগ্রাধিকার দিন।

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

YouTube Video