SASS-এ পুনরাবৃত্তি
এই নিবন্ধে SASS-এ কীভাবে পুনরাবৃত্তি পরিচালনা করতে হয় তা ব্যাখ্যা করা হয়েছে।
আমরা SASS-এ কীভাবে ধাপে ধাপে পুনরাবৃত্তি করতে হয়, প্রকৃত কোডের উদাহরণ ব্যবহার করে ব্যাখ্যা করব।
YouTube Video
SASS-এ পুনরাবৃত্তি
SASS-এ পুনরাবৃত্তি কোডের পুনরাবৃত্তি এড়াতে সহায়তা করে এবং নমনীয় ও পুনঃব্যবহারযোগ্য স্টাইল তৈরি করতে সহায়তা করে।
SASS-এ পুনরাবৃত্তি ব্যবহারের কারণসমূহ
পুনরাবৃত্তি ব্যবহারের অনেকগুলি সুবিধা রয়েছে, যেমন:।
- কোডের পুনঃব্যবহারযোগ্যতা বাড়ায়, ফলে সহজেই অনুরূপ প্যাটার্নের স্টাইল তৈরি করা যায়।
- রক্ষণাবেক্ষণযোগ্যতা বৃদ্ধি পায়, একবারেই স্টাইল পরিবর্তন করা সহজ হয়।
- এছাড়াও ভুল কমায়।
উদাহরণস্বরূপ, আপনি বিভিন্ন রঙের বোতাম অথবা একাধিক আকারের উপাদানের জন্য একসাথে স্টাইল তৈরি করতে পারেন।
SASS-এ পুনরাবৃত্তির জন্য ব্যবহৃত সিনট্যাক্স
SASS-এ পুনরাবৃত্তির জন্য প্রধান সিনট্যাক্স নিচের মতো:।
@forব্যবহার করে, নির্দিষ্ট সংখ্যার পরিসরে পুনরাবৃত্তি করতে পারেন।@eachদিয়ে আপনি তালিকা অথবা ম্যাপে লুপ চালাতে পারেন।@whileব্যবহার করে আপনি নির্দিষ্ট শর্ত পুরণ না হওয়া পর্যন্ত লুপ চালাতে পারেন।
@for ব্যবহার করে পুনরাবৃত্তি
@for নির্দিষ্ট সংখ্যার পরিসরের উপর ভিত্তি করে পুনরাবৃত্তি চালায়।
সিনট্যাক্স
1/*
2@for $i from <start> to <end> {
3 ...
4}
5
6@for $i from <start> through <end> {
7 ...
8}
9*/<start>এবং<end>–এর জন্য শুরু এবং শেষ মান নির্ধারণ করুন।toব্যবহার করলে শেষ মানটি বাদ যায়, আরthroughব্যবহারে শেষ মান অন্তর্ভুক্ত হয়।
নমুনা
নিচের কোড প্রতিটিতে ১px করে বাড়তে থাকা border width সহ ক্লাসগুলি স্বয়ংক্রিয়ভাবে তৈরি করে।
1@for $i from 1 through 5 {
2 .border-#{$i} {
3 border-width: #{$i}px;
4 }
5}- এই কোডটি প্রতিটি ক্লাসে ১px করে বাড়তে থাকা border-এর জন্য স্বয়ংক্রিয়ভাবে ক্লাস তৈরি করে। এখানে ১ থেকে ৫ পর্যন্ত লুপ চালাতে
@forনির্দেশ ব্যবহার করা হয়েছে।
তৈরিকৃত CSS
1.border-1 {
2 border-width: 1px;
3}
4.border-2 {
5 border-width: 2px;
6}
7.border-3 {
8 border-width: 3px;
9}
10.border-4 {
11 border-width: 4px;
12}
13.border-5 {
14 border-width: 5px;
15}.border-1থেকে.border-5পর্যন্ত ক্লাসগুলো পর্যায়ক্রমে তৈরি হবে এবং প্রতিটি বর্ডারের পুরুত্ব ১px করে বাড়বে।
@each ব্যবহার করে পুনরাবৃত্তি
@each তালিকা বা ম্যাপের উপর লুপ চালায়। আপনি যখন প্যাটার্নের ক্লাস দক্ষভাবে তৈরি করতে চান, তখন এটি উপকারী।
সিনট্যাক্স
1/*
2@each $item in <list> {
3 ...
4}
5*/নমুনা ১: একটি তালিকা ব্যবহার
নিচের কোডটি বহু text color ক্লাস তৈরি করে।
1@each $color in ("red", "blue", "green") {
2 .text-#{$color} {
3 color: #{$color};
4 }
5}- এই কোডটি তালিকার প্রতিটি রঙের জন্য স্বয়ংক্রিয়ভাবে text color ক্লাস তৈরি করে।
@eachনির্দেশ তালিকার প্রতিটি মান পর্যায়ক্রমে প্রক্রিয়া করার জন্য ব্যবহার করা হয়।
তৈরিকৃত CSS
1.text-red {
2 color: red;
3}
4.text-blue {
5 color: blue;
6}
7.text-green {
8 color: green;
9}- SASS ফাইলটি CSS-এ রূপান্তরের সময়,
.text-red,.text-blue, এবং.text-green-এর মতো ক্লাসগুলি তালিকার প্রতিটি রঙের জন্য তৈরি হয়।
নমুনা ২: একটি মানচিত্র ব্যবহার
একটি ম্যাপ ব্যবহার করে আপনি কী এবং মান-এর জোড়া পরিচালনা করতে পারেন। নিম্নলিখিত উদাহরণে, বোতামের পটভূমির রঙ ম্যাপ ব্যবহার করে সংজ্ঞায়িত করা হয়েছে।
1$colors: (
2 primary: #3498db,
3 success: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $hex in $colors {
8 .bg-#{$name} {
9 background-color: #{$hex};
10 }
11}তৈরিকৃত CSS
1.bg-primary {
2 background-color: #3498db;
3}
4.bg-success {
5 background-color: #2ecc71;
6}
7.bg-danger {
8 background-color: #e74c3c;
9}- SASS ফাইলটি CSS-এ রূপান্তর করলে, ম্যাপের প্রতিটি কী-এর জন্য
.bg-primary,.bg-success, এবং.bg-dangerএর মতো ক্লাস তৈরি হয়।
@while ব্যবহার করে পুনরাবৃত্তি
@while-এ যতক্ষণ শর্ত সত্য থাকে ততক্ষণ লুপ চলতে থাকে।
সিনট্যাক্স
1/*
2@while <condition> {
3 ...
4}
5*/নমুনা
উদাহরণস্বরূপ, আপনি যদি ধাপে ধাপে font size বাড়াতে চান, তাহলে এটি এভাবে লেখা যায়:।
1$i: 1;
2
3@while $i <= 5 {
4 .font-#{$i} {
5 font-size: #{$i}rem;
6 }
7 $i: $i + 1;
8}- ধাপে ধাপে font size বাড়াতে
@whileনির্দেশ পুনরাবৃত্তির জন্য ব্যবহার করতে পারেন। $i ভেরিয়েবল ব্যবহার করে, ১ থেকে ৫ পর্যন্ত মানের জন্য ক্লাসগুলি স্বয়ংক্রিয়ভাবে তৈরি হয়।
তৈরিকৃত CSS
1.font-1 {
2 font-size: 1rem;
3}
4.font-2 {
5 font-size: 2rem;
6}
7.font-3 {
8 font-size: 3rem;
9}
10.font-4 {
11 font-size: 4rem;
12}
13.font-5 {
14 font-size: 5rem;
15}- SASS ফাইলটি CSS-এ রূপান্তর হলে, ১rem থেকে ৫rem পর্যন্ত বাড়তে থাকা font size সহ ক্লাসগুলি স্বয়ংক্রিয়ভাবে তৈরি হয়।
উন্নত উদাহরণ: পুনরাবৃত্তি ও নেস্টিং একত্রে ব্যবহার
SASS-এর নেস্টিং ফিচারের সঙ্গে পুনরাবৃত্তি যুক্ত করলে আরও উন্নত স্টাইল তৈরি করা যায়।
নমুনা
নিচে এমন একটি উদাহরণ দেওয়া হয়েছে যেখানে বোতামের ব্যাকগ্রাউন্ড এবং হোভার রং একসাথে সংজ্ঞায়িত করা হয়েছে।
1@use "sass:color";
2
3$colors: (
4 primary: #3498db,
5 success: #2ecc71,
6 danger: #e74c3c
7);
8
9@each $name, $hex in $colors {
10 .btn-#{$name} {
11 background-color: $hex;
12 color: white;
13
14 &:hover {
15 background-color: color.scale($hex, $lightness: -10%);
16 }
17 }
18}- ইটারেশন এবং SASS নেস্টিং একসাথে ব্যবহার করে, আপনি একবারেই বোতামের ব্যাকগ্রাউন্ড রং এবং হোভার রং তৈরি করতে পারেন। ম্যাপের প্রতিটি রঙের জন্য একটি
.btn-ক্লাস তৈরি হয় এবং নেস্টিং ব্যবহার করে:hoverস্টাইল নির্ধারণ করা হয়।
তৈরিকৃত CSS
1.btn-primary {
2 background-color: #3498db;
3 color: white;
4}
5.btn-primary:hover {
6 background-color: #2980b9;
7}
8.btn-success {
9 background-color: #2ecc71;
10 color: white;
11}
12.btn-success:hover {
13 background-color: #27ae60;
14}
15.btn-danger {
16 background-color: #e74c3c;
17 color: white;
18}
19.btn-danger:hover {
20 background-color: #c0392b;
21}- যখন আপনি SASS ফাইলটি CSS-এ রূপান্তর করেন, প্রতিটি বোতামের জন্য ব্যাকগ্রাউন্ড রং এবং হোভার রং স্বয়ংক্রিয়ভাবে তৈরি হয়, এবং :hover স্টাইলগুলো নেস্টিং ব্যবহার করে সামষ্টিকভাবে সংজ্ঞায়িত করা হয়।
পুনরাবৃত্তি ব্যবহারের সময় লক্ষ্য করার বিষয়
আরও কার্যকর এবং পাঠযোগ্য কোড লেখার জন্য পুনরাবৃত্তি ব্যবহারের সময় নিচের বিষয়গুলো মনে রাখুন।
-
অতিরিক্ত গভীর নেস্টিং এড়িয়ে চলুন অতিরিক্ত নেস্টিং কোডের পাঠযোগ্যতা হ্রাস করে, তাই এটি যতটা সম্ভব কম রাখুন।
-
পারফরম্যান্সের প্রভাব বিবেচনা করুন পুনরাবৃত্তি দ্বারা খুব বেশি ক্লাস তৈরি হলে আপনার CSS অপ্রয়োজনীয়ভাবে বড় হতে পারে।
-
উপযুক্ত ভেরিয়েবল নাম ব্যবহার করুন
$iবা$item-এর মতো ভেরিয়েবলের জন্য অর্থবোধক নাম ব্যবহার করুন, যাতে কোডটি সহজে বোঝা যায়।
সারসংক্ষেপ
SASS-এ পুনরাবৃত্তি ব্যবহার করে কার্যকর এবং রক্ষণাবেক্ষণযোগ্য স্টাইল ডিজাইন করা যায়। বিশেষ করে, @for, @each, এবং @while থেকে উপযুক্তটি বেছে নিয়ে আপনি গতিশীল ও নমনীয় CSS তৈরি করতে পারেন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।