SASS-এ স্ট্রিং

এই নিবন্ধে SASS-এ স্ট্রিং সম্পর্কে ব্যাখ্যা করা হয়েছে।

আমরা ধাপে ধাপে দেখাবো কীভাবে SASS-এ স্ট্রিং-এর মৌলিক কার্যাবলি থেকে শুরু করে উন্নত ব্যবহারের পর্যন্ত সবকিছু ব্যবহার করতে হয়।

YouTube Video

SASS-এ স্ট্রিং

SASS হল CSS সম্প্রসারণের জন্য একটি প্রিপ্রসেসর এবং স্ট্রিংগুলি স্টাইল সংজ্ঞাগুলিকে আরও নমনীয় ও গতিশীল করতে একটি অপরিহার্য উপাদান।

স্ট্রিং-এর মৌলিক বিষয়াবলি

SASS-এ স্ট্রিং একক অথবা ডাবল কোটেশন চিহ্নের মধ্যে রাখা যায়, এবং কিছু ক্ষেত্রে, কোটেশন ছাড়াও এগুলোকে শনাক্তকারী (identifier)-এর মত লেখা যায়। নিচে সেগুলো লেখার কিছু মৌলিক উদাহরণ দেওয়া হলো।

1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;

নোটস

• কোটেশন চিহ্নে রাখা স্ট্রিংগুলো সরাসরি স্ট্রিং লিটারেল হিসেবে গণ্য হয়।
• কোটেশন ছাড়া লেখা স্ট্রিং সাধারণত CSS শনাক্তকারী যেমন ক্লাস নাম বা আইডি হিসাবে ব্যবহৃত হয়, তাই সেগুলি ব্যবহার করার সময় সতর্ক থাকতে হবে।

স্ট্রিং জোড়া লাগানো (কনক্যাটেনেশন)

SASS-এ, আপনি + অপারেটর ব্যবহার করে স্ট্রিংগুলো জোড়া লাগাতে পারেন।

1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"

• এই কোডটি SASS-এ + অপারেটর ব্যবহার করে একাধিক স্ট্রিং যুক্ত করে একটি নতুন স্ট্রিং তৈরির উদাহরণ।

উন্নত উদাহরণ: ক্লাস নাম তৈরি করা

1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5    content: $base-class + "--" + $modifier; // "btn--primary"
6}

• এই কোডটি SASS-এ + অপারেটর ব্যবহার করে একটি বেস ক্লাস নামের সাথে মডিফায়ার যুক্ত করে নতুন ক্লাস নাম গঠনের একটি উদাহরণ।

স্ট্রিং ফাংশনের ব্যবহার

SASS বিভিন্ন স্ট্রিং অপারেশন যেমন কোট কন্ট্রোল এবং সাবস্ট্রিং বের করার জন্য সুবিধাজনক বিল্ট-ইন ফাংশন প্রদান করে।

quote() এবং unquote()

quote() এবং unquote() ফাংশনের সাহায্যে আপনি স্ট্রিংয়ের কোটেশন যোগ বা বাদ দিতে পারেন।

1$quoted: quote(Hello);    // '"Hello"'
2$unquoted: unquote("Hello"); // Hello

str-length($string)

str-length() ফাংশনটি একটি স্ট্রিংয়ের দৈর্ঘ্য নির্ধারণ করে।

1$length: str-length("Hello"); // 5

str-insert($string, $insert, $index)

str-insert() ফাংশন নির্দিষ্ট স্থানে একটি স্ট্রিং সন্নিবেশ করে।

1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"

str-slice($string, $start-at, [$end-at])

str-slice() ফাংশনটি একটি স্ট্রিংয়ের একটি অংশ বের করে।

1$substring: str-slice("Hello, World!", 1, 5); // "Hello"

to-upper-case() এবং to-lower-case()

to-upper-case() এবং to-lower-case() ফাংশনগুলো স্ট্রিংকে যথাক্রমে বড় কিংবা ছোট অক্ষরে রূপান্তর করে।

1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"

শর্তাধীন লজিকে স্ট্রিং

SASS-এর @if নির্দেশনা ব্যবহার করে আপনি স্ট্রিং মানের উপর ভিত্তি করে শর্তাধীনভাবে স্টাইল পরিবর্তন বা ব্রাঞ্চ করতে পারেন এবং সেটিং বা থিম অনুসারে স্টাইল নমনীয়ভাবে পরিবর্তন করতে পারেন।

 1$theme: "dark";
 2
 3@if $theme == "dark" {
 4  body {
 5    background-color: black;
 6    color: white;
 7  }
 8} @else {
 9  body {
10    background-color: white;
11    color: black;
12  }
13}

• এই কোডটি SASS-এ @if নির্দেশনা ব্যবহার করে কোনো থিম dark কিনা তা যাচাই ও সেই অনুযায়ী স্টাইল পরিবর্তনের উদাহরণ।

ব্যবহারিক উদাহরণ: ডায়নামিক ব্যাকগ্রাউন্ড ইমেজ পাথ তৈরি করা

নিচে স্ট্রিং ম্যানিপুলেশন ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ URL তৈরির একটি উদাহরণ দেওয়া হলো।

1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6    background-image: url($image-path + $image-name + $image-extension);
7}

কম্পাইল করা ফলাফল

1.background {
2    background-image: url("/images/background.jpg");
3}

• এই কোডটি SASS-এ স্ট্রিং জোড়া লাগিয়ে ব্যাকগ্রাউন্ড ইমেজের জন্য ডায়নামিক পাথ তৈরি করে সেটি ব্যাকগ্রাউন্ড হিসেবে অ্যাপ্লাই করার একটি উদাহরণ।

লিস্ট ও ম্যাপের সাথে সংযোগ

SASS-এর লিস্ট ও ম্যাপ স্ট্রিং অপারেশনের সাথে যুক্ত করে আপনি আরও নমনীয়ভাবে স্টাইল তৈরি করতে পারেন।

লিস্টের উদাহরণ

1$states: "hover", "focus", "active";
2
3@each $state in $states {
4    .btn-#{$state} {
5        content: "Button in " + $state + " state";
6    }
7}

কম্পাইল করা ফলাফল

1.btn-hover {
2    content: "Button in hover state";
3}
4.btn-focus {
5    content: "Button in focus state";
6}
7.btn-active {
8    content: "Button in active state";
9}

• এই কোডটি SASS-এ @each নির্দেশনা ব্যবহার করে লিস্টের প্রতিটি স্টেটের জন্য ক্লাস তৈরি এবং স্ট্রিং জোড়া লাগিয়ে কনটেন্ট ডায়নামিকভাবে সেট করার উদাহরণ।

ম্যাপের উদাহরণ

 1$colors: (
 2    "primary": "#3498db",
 3    "secondary": "#2ecc71"
 4);
 5
 6@each $name, $color in $colors {
 7    .text-#{$name} {
 8        color: $color;
 9    }
10}

কম্পাইল করা ফলাফল

1.text-primary {
2    color: #3498db;
3}
4.text-secondary {
5    color: #2ecc71;
6}

• এই কোডটি SASS ম্যাপ ব্যবহার করে রঙের নামের সাথে মান যুক্ত করা ও @each নির্দেশনার মাধ্যমে প্রতিটি ক্লাস ডায়নামিকভাবে তৈরির উদাহরণ।

স্ট্রিং এস্কেপ করা

কিছু স্ট্রিংকে নিরাপদে CSS শনাক্তকারী হিসেবে ব্যবহার করার জন্য প্রয়োজনে এস্কেপ করা লাগতে পারে।

1$special_character: "example\\@123";
2.#{$special_character} {
3  content: "This is a valid CSS class.";
4}

কম্পাইল করা ফলাফল

1.example\@123 {
2    content: "This is a valid CSS class.";
3}

• এই কোডটি একটি স্ট্রিংকে, যা বিশেষ অক্ষর ধারণ করে, SASS-এ একটি ভেরিয়েবল হিসেবে ব্যবহারের, #{$variable} দ্বারা তার মান প্রসারিত করার এবং CSS-এ সেটিকে একটি বৈধ ক্লাস নাম হিসেবে ব্যবহারের একটি উদাহরণ।

উপসংহার

SASS-এ স্ট্রিং অপারেশন শুধুমাত্র স্ট্রিং লিখে শেষ নয়—এগুলো স্টাইল ডায়নামিকভাবে নির্মাণের জন্য শক্তিশালী হাতিয়ার। এখানে দেখানো মৌলিক অপারেশন ও ফাংশনগুলো ব্যবহার করে, আপনি আপনার CSS ও ডিজাইন স্টাইলের পুনঃব্যবহারযোগ্যতা ও রক্ষণাবেক্ষণ দক্ষতার সাথে বাড়াতে পারবেন।

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

YouTube Video