SASS ভেরিয়েবল
এই নিবন্ধে SASS ভেরিয়েবল নিয়ে আলোচনা করা হয়েছে।
আমরা SASS ভেরিয়েবলের বিস্তারিত ব্যাখ্যা এবং তার ব্যবহার প্রকৃত উদাহরণের মাধ্যমে ধাপে ধাপে শিখব।
YouTube Video
SASS ভেরিয়েবল
SASS হলো CSS–এর একটি এক্সটেনশন ভাষা, যা আপনাকে আরও নমনীয় ও দক্ষভাবে CSS লিখতে সাহায্য করে। এর বৈশিষ্ট্যগুলোর মধ্যে, ভেরিয়েবল হলো একটি শক্তিশালী টুল যা স্টাইলের সামঞ্জস্য বজায় রাখে এবং পরিবর্তন সহজ করে।
SASS ভেরিয়েবল কী?
SASS ভেরিয়েবল আপনাকে কালার, ফন্ট সাইজ, স্পেসিং ইত্যাদি যেসব মান বারবার CSS–এ ব্যবহার করা হয়, তা এক জায়গায় সংরক্ষণ ও পরিচালনার সুযোগ দেয়।
ভেরিয়েবল ব্যবহার করে আপনি সহজেই স্টাইল পরিবর্তন করতে পারেন এবং কোডের পাঠযোগ্যতা বাড়াতে পারেন।
ভেরিয়েবল কীভাবে লিখতে হয়
ভেরিয়েবল নিচের মতো লেখা যায়।
1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;- ভেরিয়েবলের নামের শুরুতে
$চিহ্নটি ব্যবহার করতে হবে। variable-nameহলো ভেরিয়েবলের নাম। একে পরিষ্কার এবং অর্থবহ নাম দেওয়ার পরামর্শ দেওয়া হয়।valueহলো ভেরিয়েবলে নির্ধারিত মান।
ভেরিয়েবলের মৌলিক ব্যবহার
নিচে একটি SASS ভেরিয়েবলের মৌলিক উদাহরণ দেয়া হলো।
1// Variable definition
2$primary-color: #3498db;
3$secondary-color: #2ecc71;
4$base-font-size: 16px;
5
6// Variable usage
7body {
8 font-size: $base-font-size;
9 color: $primary-color;
10 background-color: $secondary-color;
11}- যদি আপনি
$primary-colorএর মতো একটি ভেরিয়েবল নির্ধারণ করেন, তবে এই মানটি যতবার খুশি ব্যবহার করতে পারবেন। - কোনো মান পরিবর্তন করতে, শুধু ভেরিয়েবলের সংজ্ঞা পরিবর্তন করলেই চলবে, ফলে রক্ষণাবেক্ষণ আরও সহজ হয়।
তৈরি হওয়া CSS আউটপুট
1body {
2 font-size: 16px;
3 color: #3498db;
4 background-color: #2ecc71;
5}নেস্টিং–এর ভিতরে ভেরিয়েবল ব্যবহার
SASS নেস্টিং–এর সাথে ভেরিয়েবল ব্যবহার করলে কোড আরও গুছিয়ে রাখা ও পরিচালনা করা সহজ হয়।
1@use "sass:color";
2
3// Variable definition
4$button-bg: #e74c3c;
5$button-color: #fff;
6$button-padding: 10px 20px;
7
8.button {
9 background-color: $button-bg;
10 color: $button-color;
11 padding: $button-padding;
12
13 &:hover {
14 background-color: color.adjust($button-bg, $lightness: -10%);
15 }
16}- আপনি নেস্টেড সিলেক্টরের ভেতরে ভেরিয়েবল ব্যবহার করতে পারেন।
- ভেরিয়েবলগুলোর সংমিশ্রণ করে আপনি নমনীয় স্টাইলিং অর্জন করতে পারেন, যেমন
color.adjustফাংশন ব্যবহার করে কোনও রঙকে ১০% গাঢ় করা।
তৈরি হওয়া CSS আউটপুট
1.button {
2 background-color: #e74c3c;
3 color: #fff;
4 padding: 10px 20px;
5}
6
7.button:hover {
8 background-color: #c0392b;
9}ডিফল্ট মানসহ ভেরিয়েবল
SASS–এ, আপনি ভেরিয়েবলের জন্য ডিফল্ট মান নির্ধারণ করতে পারেন। ডিফল্ট মান নির্ধারণ করলে পূর্ববর্তী ভেরিয়েবল ওভাররাইট না করে ব্যবহার করা যায়।
1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8 font-size: $font-size;
9}!defaultযোগ করলে, ভেরিয়েবলটি যদি ইতিমধ্যে সংজ্ঞায়িত থাকে তবে সেটি ওভাররাইট হবে না।- এটি টিমে কাজ করার সময় বা পুরো প্রকল্পের সেটিংসের জন্য উপকারী।
তৈরি হওয়া CSS আউটপুট
1p {
2 font-size: 16px;
3}ভেরিয়েবল স্কোপ
SASS ভেরিয়েবলের একটি স্কোপ থাকে, এবং এগুলোর ব্যবহারের স্থান নির্ভর করে সংজ্ঞায়নের স্থানের উপর। স্কোপ বোঝা গুরুত্বপূর্ণ, কারণ এটি ভেরিয়েবলের অনাকাঙ্ক্ষিত ওভাররাইট প্রতিরোধে সাহায্য করে।
- গ্লোবাল স্কোপ
1$global-color: #ff6347;
2
3.header {
4 color: $global-color;
5}- গ্লোবাল স্কোপের ভেরিয়েবল পুরো ফাইলে ব্যবহারের জন্য উন্মুক্ত থাকে।
- লোকাল স্কোপ
1.card {
2 $card-bg: #f0f0f0;
3 background-color: $card-bg;
4}
5
6.button {
7 // Error: $card-bg cannot be used
8 background-color: $card-bg;
9}- লোকাল স্কোপের ভেরিয়েবল শুধুমাত্র নির্দিষ্ট কোনো নেস্টিং বা ফাইলের মধ্যে ব্যবহারের জন্য সীমাবদ্ধ।
গণনায় ভেরিয়েবল ব্যবহার
SASS ভেরিয়েবল গণনায়ও ব্যবহার করা যায়। এককভিত্তিক মান এবং রঙের উপরেও গণনা করা যাবে।
1@use "sass:color";
2
3$base-padding: 10px;
4$double-padding: $base-padding * 2;
5
6.container {
7 padding: $double-padding;
8}
9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14 color: $lighter-color;
15}তৈরি হওয়া CSS আউটপুট
1.container {
2 padding: 20px;
3}
4
5h1 {
6 color: #5dade2;
7}- রঙের পরিবর্তন বা স্পেসিংয়ের হিসেব-নিকাশে ভেরিয়েবল ব্যবহার করলে দেখাশোনা করা সহজ হয়।
সারসংক্ষেপ
CSS–এর দক্ষ ব্যবস্থাপনা এবং রক্ষণাবেক্ষণের জন্য SASS ভেরিয়েবল অপরিহার্য একটি বৈশিষ্ট্য।
SASS ভেরিয়েবল ব্যবহার করলে পুরো প্রকল্পে একরূপ স্টাইল বজায় থাকে এবং পরিবর্তন সহজ হয়।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।