SASS-এ মানচিত্রসমূহ
এই লেখাটি SASS-এ মানচিত্রসমূহ ব্যাখ্যা করে।
আমরা SASS মানচিত্রের মৌলিক থেকে উন্নত ব্যবহার ব্যাখ্যা করব এবং ব্যবহারিক উদাহরণ দিব।
YouTube Video
SASS-এ মানচিত্রসমূহ
SASS-এ মানচিত্র কী?
SASS-এ একটি মানচিত্র হল একটি ডেটা স্ট্রাকচার, যা কী-ভ্যালু জোড়া সংরক্ষণ করে, যা JavaScript-এর অবজেক্ট বা Python-এর ডিকশনারির মতো। SASS-এ মানচিত্র ব্যবহার করে, আপনি জটিল স্টাইলসমূহ সংক্ষিপ্তভাবে পরিচালনা করতে পারেন এবং রক্ষণাবেক্ষণ সহজ করতে পারেন।
মানচিত্রের মৌলিক সিনট্যাক্স
SASS-এ মানচিত্র ()
(বড় বন্ধনী) ব্যবহার করে সংজ্ঞায়িত করা হয়। সিনট্যাক্স নিম্নরূপ:।
1$map-name: (
2 key1: value1,
3 key2: value2,
4 key3: value3
5);
উদাহরণস্বরূপ, রঙের থিম ব্যবস্থাপনা করার জন্য একটি মানচিত্র তৈরি করতে, নিচের মতো সংজ্ঞায়িত করতে পারেন:।
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
একটি মানচিত্র থেকে মান প্রাপ্তি
SASS-এ, আপনি map.get()
ফাংশন ব্যবহার করে মানচিত্র থেকে একটি মান নিতে পারেন।
ব্যবহারের উদাহরণ:
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8.button {
9 background-color: map.get($colors, primary);
10}
আউটপুট:
1.button {
2 background-color: #3498db;
3}
- এই কোডটি
$colors
মানচিত্র থেকেprimary
রঙের মান নিয়ে বোতামের ব্যাকগ্রাউন্ড রঙ হিসাবে প্রয়োগ করে।
একটি মানচিত্রে কী ও মান নির্ধারণ
map.set()
ফাংশন ব্যবহার করে, আপনি নির্দিষ্ট কী-তে নতুন মান নির্ধারণ করতে পারেন। যদি কী ইতিমধ্যে থাকে, তার মান ওভাররাইট হবে।
উদাহরণ ব্যবহার
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8// set danger color
9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12 background-color: map.get($updated-colors, danger);
13}
- এই কোডটি মানচিত্রে
danger
কী যোগ করে এবং তার মান বোতামের ব্যাকগ্রাউন্ড রঙ হিসাবে নির্ধারণ করে।
আউটপুট
1.button-danger {
2 background-color: #e74c3c;
3}
একটি মানচিত্র থেকে কী অপসারণ
map.remove()
ফাংশন ব্যবহার করে, আপনি মানচিত্র থেকে নির্দিষ্ট কী ও তার মান অপসারণ করতে পারেন।
উদাহরণ ব্যবহার
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71,
6 danger: #e74c3c
7);
8
9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13 background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17 background-color: map.get($reduced-colors, danger);
18}
- এই কোডটি মানচিত্র থেকে
danger
কী অপসারণ করে, তাইbutton-danger
-এর ব্যাকগ্রাউন্ড রঙnull
হবে।
আউটপুট
1.button-primary {
2 background-color: #3498db;
3}
একটি মানচিত্রে কী ও মান যোগ করা
map.merge()
ফাংশন ব্যবহার করে, আপনি বর্তমান মানচিত্রে নতুন কী ও মান যোগ করতে পারেন।
উদাহরণ ব্যবহার
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (danger: #e74c3c));
9
10.button-danger {
11 background-color: map.get($extended-colors, danger);
12}
- এই কোডটি একটি বিদ্যমান SASS মানচিত্রে
danger
কী যোগ করে এবং তার রঙ বোতামের ব্যাকগ্রাউন্ড রঙ হিসাবে নির্ধারণ করে।
আউটপুট
1.button-danger {
2 background-color: #e74c3c;
3}
একটি মানচিত্রে একাধিক কী ও মান যোগ করা
map.merge()
ফাংশন ব্যবহার করে, আপনি একসাথে একাধিক কী ও মান বর্তমান মানচিত্রে যোগ করতে পারেন।
উদাহরণ ব্যবহার
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (
9 danger: #e74c3c,
10 warning: #f39c12,
11 info: #8e44ad
12));
13
14.button-danger {
15 background-color: map.get($extended-colors, danger);
16}
- এই কোডটি একসাথে একাধিক কী ও মান বিদ্যমান SASS মানচিত্রে যোগ করে।
একটি মানচিত্রে কী আছে কিনা পরীক্ষা করা
map.has-key()
ফাংশন আপনাকে একটি মানচিত্রে নির্দিষ্ট কী আছে কিনা যাচাই করতে দেয়।
উদাহরণ ব্যবহার
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger); // false
একটি মানচিত্র থেকে সব কী বা মান প্রাপ্তি
সব কী প্রাপ্তি
map.keys()
ফাংশন ব্যবহার করে, আপনি সব কী পেতে পারেন।
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)
সব মান প্রাপ্তি
map.values()
ফাংশন ব্যবহার করে, আপনি সব মান পেতে পারেন।
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)
একটি মানচিত্রে লুপ করা
SASS-এ, আপনি @each
নির্দেশনা ব্যবহার করে মানচিত্রে লুপ করতে পারেন।
উদাহরণ ব্যবহার
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $color in $colors {
8 .color-#{$name} {
9 background-color: $color;
10 }
11}
- এই কোডটি SASS মানচিত্রে প্রত্যেক কী ও মানে লুপ করে এবং প্রতি রঙের জন্য স্বয়ংক্রিয়ভাবে একটি ক্লাস তৈরি করে।
আউটপুট
1.color-primary {
2 background-color: #3498db;
3}
4
5.color-secondary {
6 background-color: #2ecc71;
7}
8
9.color-danger {
10 background-color: #e74c3c;
11}
নেস্টেড মানচিত্র পরিচালনা
মানচিত্রে নেস্টেড স্ট্রাকচারও থাকতে পারে। এক্ষেত্রে, নেস্টেড map.get()
ফাংশন ব্যবহার করুন।
উদাহরণ ব্যবহার
1@use "sass:map";
2
3$themes: (
4 light: (
5 background: #ffffff,
6 text: #000000
7 ),
8 dark: (
9 background: #000000,
10 text: #ffffff
11 )
12);
13
14body {
15 background-color: map.get(map.get($themes, light), background);
16 color: map.get(map.get($themes, light), text);
17}
- এই কোডটি
light
থিমের জন্য নেস্টেড SASS মানচিত্র থেকে ব্যাকগ্রাউন্ড ও টেক্সট রঙ গ্রহণ করে এবংbody
-তে প্রয়োগ করে।
আউটপুট
1body {
2 background-color: #ffffff;
3 color: #000000;
4}
মানচিত্রের ব্যবহারের ক্ষেত্র: প্রতিক্রিয়াশীল ডিজাইন
মানচিত্র ব্যবহার করে, আপনি সহজেই মিডিয়া কুয়েরি ও প্রতিক্রিয়াশীল ডিজাইন পরিচালনা করতে পারেন।
উদাহরণ ব্যবহার
1$breakpoints: (
2 small: 480px,
3 medium: 768px,
4 large: 1024px
5);
6
7@each $label, $size in $breakpoints {
8 @media (max-width: $size) {
9 .container-#{$label} {
10 width: 100%;
11 }
12 }
13}
- এই কোডটি SASS মানচিত্র ব্যবহার করে প্রতিটি ব্রেকপয়েন্টের জন্য স্বয়ংক্রিয়ভাবে প্রতিক্রিয়াশীল কন্টেইনার ক্লাস তৈরি করে।
আউটপুট
1@media (max-width: 480px) {
2 .container-small {
3 width: 100%;
4 }
5}
6
7@media (max-width: 768px) {
8 .container-medium {
9 width: 100%;
10 }
11}
12
13@media (max-width: 1024px) {
14 .container-large {
15 width: 100%;
16 }
17}
উপসংহার
SASS মানচিত্র আপনার স্টাইলশিট সংগঠনের জন্য একটি শক্তিশালী টুল, যা নমনীয়তা ও পুনর্ব্যবহারের ক্ষমতা বৃদ্ধি করে। এইগুলো বিভিন্ন ক্ষেত্রে ব্যবহার করা যায়, যেমন মান ব্যবস্থাপনা, লুপিং, এবং প্রতিক্রিয়াশীল ডিজাইন প্রয়োগে।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।