Sass (Syntactically Awesome Stylesheets) এর পরিচিতি
Sass হল একটি CSS প্রিপ্রসেসর যা CSS কোড লেখার জন্য একটি উন্নত এবং শক্তিশালী উপায় প্রদান করে। এটি CSS এর মধ্যে পরিবর্তনশীল (variables), নেস্টিং (nesting), মিক্সিন (mixins), ইনহেরিটেন্স (inheritance) এবং গাণিতিক অপারেশন (mathematical operations) ইত্যাদি সহ অনেক সুবিধা প্রদান করে। Sass আপনার স্টাইলশীটগুলিকে আরও সংগঠিত, পুনঃব্যবহারযোগ্য এবং স্কেলেবল করে তোলে। এর মাধ্যমে আপনার কোড দ্রুত এবং সহজে বজায় রাখা যায়।
Sass এর গাণিতিক অপারেশন
Sass গাণিতিক অপারেশন (mathematical operations) সমর্থন করে, যা CSS প্রপার্টি মানে যোগ, বিয়োগ, গুণ এবং ভাগ করার মতো গাণিতিক কাজ সহজে করতে সহায়ক। Sass এ গাণিতিক অপারেশনগুলি একাধিক স্টাইলিং প্রয়োগে ব্যবহৃত হয়, যেমন উপাদানের আকার পরিবর্তন, স্পেসিং, প্যাডিং এবং মার্জিনের মান নির্ধারণে।
Sass এ গাণিতিক অপারেশনসমূহ:
- যোগ (+)
- বিয়োগ (-)
- গুণ (*)
- ভাগ (/)
- মডুলাস (%): ভাগের পর যে অবশিষ্ট থাকে সেটি গণনা করতে ব্যবহৃত হয়।
এগুলি কেবল সংখ্যা বা ভেরিয়েবলগুলির উপর নয়, সেগুলি সিএসএস প্রপার্টি মান (যেমন পিক্সেল, শতাংশ, ইম, ইত্যাদি) এবং গণনা করতে ব্যবহৃত হতে পারে।
১. যোগ (Addition)
Sass এ দুটি মানের যোগ করার জন্য + অপারেটর ব্যবহার করা হয়।
উদাহরণ:
$width: 200px;
$padding: 10px;
.container {
width: $width + $padding; // 210px
}
এখানে, $width এবং $padding এর যোগফল হবে এবং container ক্লাসের জন্য নতুন প্রপার্টি width সেট হবে 210px।
২. বিয়োগ (Subtraction)
Sass এ দুটি মানের বিয়োগ করার জন্য - অপারেটর ব্যবহার করা হয়।
উদাহরণ:
$width: 100%;
$margin: 20px;
.container {
width: $width - $margin; // 100% - 20px
}
এখানে, $width থেকে $margin বিয়োগ করা হয়েছে। তবে মনে রাখবেন, এই ধরনের অপারেশন CSS প্রপার্টি মানের সঙ্গে সামঞ্জস্যপূর্ণ হতে হবে (যেমন 100% - 20px এর মাধ্যমে CSS ব্রাউজারে অনুমোদিত মান হতে হবে)।
৩. গুণ (Multiplication)
Sass এ দুটি মান গুণ করার জন্য * অপারেটর ব্যবহার করা হয়।
উদাহরণ:
$width: 50px;
$scale: 2;
.container {
width: $width * $scale; // 100px
}
এখানে, $width এবং $scale গুণফল হবে এবং container ক্লাসের জন্য নতুন width 100px হবে।
৪. ভাগ (Division)
Sass এ দুটি মান ভাগ করার জন্য / অপারেটর ব্যবহার করা হয়। ভাগের মাধ্যমে px, %, এবং অন্যান্য ইউনিটের মান হ্রাস বা বৃদ্ধি করা যায়।
উদাহরণ:
$width: 200px;
$divisor: 2;
.container {
width: $width / $divisor; // 100px
}
এখানে, $width কে $divisor দিয়ে ভাগ করা হয়েছে এবং ফলস্বরূপ container ক্লাসের জন্য width হবে 100px।
৫. মডুলাস (Modulus)
Modulus অপারেশনটি ভাগফল থেকে অবশিষ্ট অংশ বের করতে ব্যবহৃত হয়। Sass এ মডুলাস নির্ণয়ের জন্য % অপারেটর ব্যবহার করা হয়।
উদাহরণ:
$width: 50px;
$divisor: 6;
.container {
width: $width % $divisor; // 50px % 6 = 2px
}
এখানে, $width এবং $divisor এর মডুলাস করা হয়েছে এবং অবশিষ্ট ২ পিক্সেল হবে, যার ফলে container ক্লাসের width হবে 2px।
৬. একটি পরিমাণে যোগ করা/বিয়োগ করা
যখন আপনার স্টাইলের মধ্যে একটি নির্দিষ্ট মানে গাণিতিক অপারেশন করতে হয়, তখন সেই প্রপার্টি মানকে ব্যবহার করতে পারেন।
উদাহরণ:
$margin: 10px;
.container {
margin-left: $margin + 5px; // 15px
margin-right: $margin - 2px; // 8px
}
এখানে, $margin ভেরিয়েবলকে 5px যোগ করা হয়েছে এবং 2px বিয়োগ করা হয়েছে।
Sass এর গাণিতিক অপারেশন ব্যবহার করা কেন উপকারী?
- কোডের পুনঃব্যবহারযোগ্যতা: আপনি একটি ভেরিয়েবলকে একাধিক স্থানে ব্যবহার করতে পারেন, যার মাধ্যমে আপনার কোড আরও সহজ এবং কমপ্যাক্ট হয়।
- সহজ রক্ষণাবেক্ষণ: একক স্থান থেকে পরিবর্তন করলে তা অন্যান্য অংশে স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়, যা রক্ষণাবেক্ষণ সহজ করে তোলে।
- প্যারামিটারাইজড সিএসএস: গাণিতিক অপারেশন ব্যবহার করে প্যারামিটারাইজড স্টাইল তৈরি করতে পারেন, যেমন উপাদানের আকার পরিবর্তন, মার্জিন বা প্যাডিং এর পরিমাণ পরিবর্তন করা ইত্যাদি।
সারাংশ
Sass গাণিতিক অপারেশনগুলির মাধ্যমে CSS কোডে বিভিন্ন সংখ্যার এবং প্রপার্টি মানের উপর গাণিতিক অপারেশন করা যায়, যেমন যোগ, বিয়োগ, গুণ, ভাগ, এবং মডুলাস। এটি আপনার কোডের পুনঃব্যবহারযোগ্যতা বাড়ায় এবং কোড লেখা এবং রক্ষণাবেক্ষণ সহজ করে তোলে। গাণিতিক অপারেশনগুলি ব্যবহার করে আপনি আরও গতিশীল এবং ইফেকটিভ CSS কোড তৈরি করতে পারেন যা ভবিষ্যতে সহজে পরিচালনা করা যায়।
Read more
