SASS-এ তালিকা

SASS-এ তালিকা

এই নিবন্ধটি SASS-এ তালিকা ব্যাখ্যা করে।

আমরা SASS তালিকার মৌলিক ও উন্নত ব্যবহার এবং ব্যবহারিক উদাহরণ দেখাবো।

YouTube Video

SASS-এ তালিকা

SASS, CSS-র জন্য একটি এক্সটেনশন হিসেবে কার্যকর প্রোগ্রামিং-সদৃশ বৈশিষ্ট্য প্রদান করে। এর মধ্যে, তালিকাগুলি শৈলী ডায়নামিকভাবে সংজ্ঞায়িত করার জন্য অন্যতম কার্যকর ফিচার।

SASS তালিকা কী?

SASS তালিকা হল কমা (,) বা স্পেস দ্বারা বিভক্ত মানের সমষ্টি। একাধিক মান CSS প্রোপার্টিতে পাস করতে বা পুনরাবৃত্তি (iteration) করতে এগুলো ব্যবহৃত হয়।

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

তালিকার প্রধান বৈশিষ্ট্যগুলো হলো:।

  • একটি তালিকায় যেকোনো ডেটা টাইপের মান থাকতে পারে, যেমন সংখ্যা, স্ট্রিং, বা রঙ।
  • ব্যবহারের পরিস্থিতি অনুযায়ী আপনি কমা-সেপারেটেড বা স্পেস-সেপারেটেড তালিকা বেছে নিতে পারেন।

তালিকা ব্যবহার করে স্টাইল সংজ্ঞায়নের মৌলিক উদাহরণ

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

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

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

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}
  • sass:list মডিউলের nth() ফাংশন ব্যবহার করে আপনি একটি তালিকা থেকে নির্দিষ্ট একটি মান বের করতে পারেন।

তালিকা পরিচালনা

sass:list মডিউলটি তালিকা পরিচালনার জন্য ফাংশন সরবরাহ করে, যা উপাদান সংগ্রহ ও যোগ করা সহজ করে।

একটি উপাদান বের করুন: nth()

nth() হল একটি ফাংশন যা একটি তালিকা থেকে উপাদান বের করে।

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red
  • এই কোডে, nth() ফাংশন নির্দিষ্ট সূচকে থাকা মান বের করতে ব্যবহৃত হয়েছে।

সূচক পরীক্ষা করুন: index()

index() একটি ফাংশন যা তালিকার কোনো উপাদানের অবস্থান (স্থান) ফেরত দেয়।

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3
  • এই কোডে, index() ব্যবহৃত হয়েছে blue উপাদানটি তালিকার তৃতীয় আইটেম তা বের করতে।

তালিকার দৈর্ঘ্য বের করুন: length()

length() হল একটি ফাংশন যা একটি তালিকার দৈর্ঘ্য ফেরত দেয়।

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3
  • এই কোডে, তালিকায় মোট কতগুলো মান আছে তা জানতে length() ফাংশন ব্যবহার করা হয়েছে।

উপাদান যোগ করুন: append()

append() একটি ফাংশন, যা তালিকায় উপাদান যোগ করতে ব্যবহৃত হয়।

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle
  • এই কোডে, তালিকায় একটি মান যোগ করতে append() ফাংশন ব্যবহৃত হয়েছে।

উপাদান প্রতিস্থাপন করুন: set-nth()

set-nth() একটি ফাংশন যা নির্দিষ্ট অবস্থানের উপাদানকে অন্য মান দিয়ে প্রতিস্থাপন করে।

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue
  • এই কোডে, set-nth() ব্যবহৃত হয়েছে দ্বিতীয় উপাদানটি yellow উপাদান দিয়ে প্রতিস্থাপন করতে।

তালিকা একত্রিত করুন: join()

join() একটি ফাংশন যা দুইটি তালিকা একত্রিত করে।

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d
  • এই কোডে, join() ব্যবহৃত হয়েছে দুটি তালিকাকে একটিতে একত্রিত করতে।

তালিকা জোড়া তৈরি করুন: zip()

zip() একটি ফাংশন যা একাধিক তালিকাকে উপাদান অনুযায়ী জোড়ায় ভাগ করে।

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)
  • এই কোডে, zip() ব্যবহৃত হয়েছে নাম এবং বয়স জোড়া হিসেবে একত্রিত করতে।

নেস্টেড তালিকা

তালিকাগুলি নেস্টেডও হতে পারে, যাতে এগুলোকে দ্বি-মাত্রিক অ্যারের মতো ব্যবহার করা যায়।

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red
  • এ ধরনের জটিল ডেটা স্ট্রাকচার ব্যবস্থাপনার মাধ্যমে উন্নত স্টাইল তৈরি করা সম্ভব হয়।

ব্যবহারিক উদাহরণ: গ্রেডিয়েন্ট তৈরি

তালিকা ব্যবহার করে দক্ষতার সাথে গ্রেডিয়েন্ট তৈরির একটি উদাহরণ নিচে দেওয়া হলো।

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

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

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}
  • এই কোডটি SCSS-এ তালিকা ব্যবহার করে স্বয়ংক্রিয়ভাবে গ্রেডিয়েন্ট তৈরি করার একটি উদাহরণ।

    • গ্রেডিয়েন্টের জন্য ব্যবহৃত রংগুলো $colors তালিকায় সংজ্ঞায়িত করা হয়েছে।
    • gradient() ফাংশনে, রঙের সংখ্যা অনুযায়ী প্রতিটি রঙকে সমানভাবে একটি অবস্থান দেওয়া হয় এবং গ্রেডিয়েন্টের জন্য একটি তালিকা তৈরি করা হয়।
    • .background ক্লাসে, প্রস্তুতকৃত রঙের তালিকা একত্রে linear-gradient ব্যবহার করে অনুভূমিক গ্রেডিয়েন্ট প্রয়োগ করা হয়েছে।
  • কারণ অবস্থানগুলো রঙের তালিকার দৈর্ঘ্য অনুসারে স্বয়ংক্রিয়ভাবে নির্ধারিত হয়, তাই আপনি সহজেই রং যোগ বা পরিবর্তন করে সমানভাবে গ্রেডিয়েন্ট তৈরি করতে পারবেন।

সতর্কতা এবং সেরা অনুশীলন

তালিকা ব্যবহারের ক্ষেত্রে নিম্নলিখিত বিষয়গুলো বিবেচনা করা যেতে পারে:।

  • তালিকার সেপারেটর টাইপ কমা এবং স্পেস সেপারেটেড তালিকা পৃথকভাবে ব্যবহৃত হয়, তাই আপনাকে পরিস্থিতি অনুযায়ী সঠিকটি বেছে নিতে হবে।

  • তালিকার আকার তালিকা ডায়নামিকভাবে ব্যবস্থাপনার সময়, length() ফাংশন দিয়ে আকার পরীক্ষার করা নিরাপদ।

  • নেস্টেড তালিকা ব্যবস্থাপনা নেস্টেড তালিকা ব্যবস্থাপনার সময় সূচক নিয়ে সাবধানতা অবলম্বন করলে ত্রুটি এড়ানো যায়।

উপসংহার

SASS তালিকা হল স্টাইল ডায়নামিকভাবে সংজ্ঞায়ন ও জটিল ডিজাইন দক্ষতার সাথে ব্যবস্থাপনার জন্য একটি শক্তিশালী টুল।

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

YouTube Video