Sass কি?
Sass (Syntactically Awesome Stylesheets) একটি CSS প্রিপ্রসেসর যা CSS লেখার প্রক্রিয়াকে আরও শক্তিশালী, দ্রুত এবং কার্যকরী করে তোলে। এটি CSS এর একটি অত্যাধুনিক সংস্করণ, যা ভেরিয়েবল, নেস্টিং, মিক্সিন, ইনহেরিটেন্স এবং আরো অনেক সুবিধা প্রদান করে। Sass মূলত SCSS (Sassy CSS) এবং Sass (indented syntax) দুটি ভিন্ন সিনট্যাক্সে ব্যবহার করা যেতে পারে, তবে SCSS সিনট্যাক্সটি CSS এর সঙ্গে সামঞ্জস্যপূর্ণ হওয়ায় এটি সাধারণত বেশি ব্যবহৃত হয়।
Sass এর মধ্যে বিভিন্ন built-in functions রয়েছে, যা CSS লেখার সময় আরও উন্নত এবং পরিষ্কার কোড তৈরিতে সহায়তা করে। এই functions গুলি আপনাকে বিভিন্ন ধরনের গণনা, ডেটা ম্যানিপুলেশন, কালার ম্যানিপুলেশন এবং স্টাইলসেট তৈরি করতে সাহায্য করে।
Sass এর Built-in Functions এর Types
Sass এর built-in functions মূলত তিনটি বড় বিভাগে বিভক্ত করা যায়:
- Color Functions
- String Functions
- List and Map Functions
- Mathematical Functions
এখানে আমরা প্রতিটি ক্যাটেগরির মধ্যে কয়েকটি গুরুত্বপূর্ণ built-in function এর বিস্তারিত আলোচনা করব।
১. Color Functions
Sass এ বিভিন্ন color manipulation functions রয়েছে যা আপনাকে রঙের মান পরিবর্তন বা ম্যানিপুলেট করতে সাহায্য করে।
darken()
darken() ফাংশনটি একটি নির্দিষ্ট রঙকে অন্ধকার করে।
$color: #f00;
$dark-color: darken($color, 20%);
এখানে, $dark-color হবে 20% darker লাল (#f00)।
lighten()
lighten() ফাংশনটি একটি নির্দিষ্ট রঙকে হালকা করে।
$color: #f00;
$light-color: lighten($color, 20%);
এখানে, $light-color হবে 20% lighter লাল (#f00)।
mix()
mix() ফাংশন দুটি রঙ মিশিয়ে নতুন একটি রঙ তৈরি করে।
$color1: #ff0000;
$color2: #0000ff;
$mixed-color: mix($color1, $color2, 50%);
এখানে, $mixed-color একটি 50% মিশ্রণ হবে লাল এবং নীল রঙের।
২. String Functions
Sass এ স্ট্রিং ম্যানিপুলেশনের জন্য বেশ কিছু ফাংশন রয়েছে যা স্টাইলের মধ্যে ব্যবহার করার জন্য উপযোগী।
quote()
quote() ফাংশনটি একটি স্ট্রিংকে উদ্ধৃত চিহ্নের মধ্যে রাখে।
$mystring: hello;
$quoted-string: quote($mystring);
এখানে, $quoted-string হবে "hello" (উদ্ধৃত চিহ্ন সহ)।
unquote()
unquote() ফাংশনটি একটি উদ্ধৃত স্ট্রিং থেকে উদ্ধৃত চিহ্ন সরিয়ে দেয়।
$quoted: "hello";
$unquoted: unquote($quoted);
এখানে, $unquoted হবে hello (উদ্ধৃত চিহ্ন ছাড়া)।
৩. List and Map Functions
Sass এর list এবং map ডেটা টাইপের জন্য অনেকগুলো built-in function রয়েছে।
length()
length() ফাংশনটি একটি লিস্টের দৈর্ঘ্য (আইটেমের সংখ্যা) বের করে।
$list: 1, 2, 3, 4;
$list-length: length($list);
এখানে, $list-length হবে 4।
nth()
nth() ফাংশনটি একটি লিস্টের নির্দিষ্ট ইনডেক্সের মান রিটার্ন করে।
$list: 10px, 20px, 30px;
$third-item: nth($list, 3);
এখানে, $third-item হবে 30px (থার্ড আইটেম)।
map-get()
map-get() ফাংশনটি একটি ম্যাপ থেকে নির্দিষ্ট কী এর মান বের করে।
$map: (a: 1, b: 2, c: 3);
$val: map-get($map, b);
এখানে, $val হবে 2 (যেহেতু b এর মান ২)।
৪. Mathematical Functions
Sass এ বিভিন্ন গণনা ফাংশন রয়েছে যা সিএসএস কাস্টম প্রপার্টি বা ইউনিটের মান পরিবর্তন করতে সহায়তা করে।
math.div()
math.div() ফাংশনটি দুইটি সংখ্যাকে ভাগ করে এবং সঠিক ফলাফল প্রদান করে। (Sass 1.33.0+)
$width: 1200px;
$columns: 4;
$column-width: math.div($width, $columns);
এখানে, $column-width হবে 300px (1200px কে ৪ দিয়ে ভাগ করা হয়েছে)।
abs()
abs() ফাংশনটি একটি সংখ্যার পার্সেপশন বা পরিমাণ (absolute value) রিটার্ন করে।
$number: -50;
$abs-value: abs($number);
এখানে, $abs-value হবে 50 (নেগেটিভ সংখ্যার পার্সেপশন)।
round()
round() ফাংশনটি একটি ভাসমান পয়েন্ট নম্বরকে রাউন্ড করে দেয়।
$number: 4.567;
$rounded: round($number);
এখানে, $rounded হবে 5 (৪.৫৬৭ কে রাউন্ড করে ৫ করা হয়েছে)।
অন্যান্য গুরুত্বপূর্ণ Built-in Functions
percentage(): একটি সংখ্যা শতাংশে রূপান্তর করে।$value: 0.75; $percent: percentage($value);এখানে,
$percentহবে 75%।rgba(): RGBA ফরম্যাটে রঙ তৈরি করে।$color: rgba(255, 0, 0, 0.5);এখানে,
$colorহবে rgba(255, 0, 0, 0.5) (আধা স্বচ্ছ লাল রঙ)।url(): একটি URL তৈরি করে।$image: "images/logo.png"; $url: url($image);এখানে,
$urlহবে url(images/logo.png)।
সারাংশ
Sass এর built-in functions ওয়েব ডেভেলপারদের CSS স্টাইলিং এবং প্রোপার্টি ম্যানিপুলেশনকে সহজ করে তোলে। আপনি color functions, string functions, mathematical functions, list/map functions ইত্যাদি ব্যবহার করে আপনার CSS কোডকে আরও শক্তিশালী এবং ফ্লেক্সিবল করে তুলতে পারেন। এই functions গুলির মাধ্যমে Sass কোড লিখতে অনেক দ্রুত এবং উন্নত হয়, এবং ডেভেলপাররা কমপ্লেক্স CSS ম্যানিপুলেশন সহজে করতে পারেন।
Read more
