SASS ফাংশনগুলো
এই নিবন্ধে SASS ফাংশন বোঝানো হয়েছে।
আমরা SASS ফাংশনগুলো সম্পূর্ণভাবে ব্যাখ্যা করব, মূল বিষয় থেকে শুরু করে উন্নত বিষয় পর্যন্ত, বাস্তব কাজের জন্য দরকারী নমুনাসহ।
YouTube Video
SASS ফাংশনগুলো
SASS ফাংশন হলো শক্তিশালী একটি টুল, যা স্টাইলশিটের মধ্যে পুনঃব্যবহারযোগ্য যুক্তি সংরক্ষণ করে, গণনা, ফরম্যাটিং ও শর্তাধীন ব্রাঞ্চিং সক্ষম করে।
ফাংশনের মৌলিক গঠন ও ব্যবহার
SASS ফাংশন @function দিয়ে ডিফাইন করা হয় এবং @return দিয়ে কোনো মান ফেরত দেয়। ফাংশনগুলো বিল্ট-ইন ফাংশনের মতোই কল করা হয়।
1// Example: Define a simple function that doubles a value
2@function double($n) {
3 @return $n * 2;
4}
5
6// Use the function
7.example {
8 width: double(10px); // -> 20px
9}- এই কোডটি একটি ফাংশন সংজ্ঞায়িত করে যা একটি সংখ্যাকে দ্বিগুণ করে এবং সেটি প্রস্থে প্রয়োগ করে। ফলে,
.example { width: 20px; }তৈরি হবে।
আর্গুমেন্ট, ডিফল্ট মান এবং টাইপ পরিচালনা
ফাংশন একাধিক আর্গুমেন্ট নিতে পারে এবং ডিফল্ট মান নির্ধারণ করতে পারে। SASS-এ স্ট্যাটিক টাইপ বাধ্যতামূলক নয়, তবে আর্গুমেন্টের ফরম্যাটে খেয়াল রাখলে আপনার ফাংশন আরও দৃঢ় হয়।
1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3 @return $base-size * $scale + $unit;
4}
5
6.title {
7 font-size: responsive-font(16, 1.25); // -> 20px
8}responsive-fontএscaleওunit-এর জন্য ডিফল্ট মান আছে, এবং কল করার সময় কিছু আর্গুমেন্ট বাদ দেওয়া যেতে পারে। এই উদাহরণে,font-size: 20px;এর মতো একটি মান আউটপুট হবে।
ভ্যারিয়াডিক আর্গুমেন্ট (...) ব্যবহার করা
আপনি যদি একাধিক মান পাঠাতে চান তবে ভ্যারিয়াডিক আর্গুমেন্ট ব্যবহার করুন। এটি তালিকা বা একাধিক রং পরিচালনার ক্ষেত্রে উপকারী।
1// Example: Sum any number of numbers passed in
2@function sum-all($numbers...) {
3 $total: 0;
4 @each $n in $numbers {
5 $total: $total + $n;
6 }
7 @return $total;
8}
9
10.box {
11 padding: sum-all(4px, 6px, 10px); // -> 20px
12}$numbers...এর মতো ভ্যারিয়াডিক আর্গুমেন্টকে তালিকা হিসাবে গণ্য করা হয় এবং@eachদিয়ে প্রক্রিয়া করা যায়। এই উদাহরণে,padding: 20px;আউটপুট হবে।
তালিকা বা ম্যাপ ফেরত দেয়া ও পরিচালনা করা
ফাংশন তালিকা (স্পেস বা কমা দ্বারা পৃথক) কিংবা ম্যাপও ফেরত দিতে পারে। এটি জটিল মান ফেরত দেয়ার জন্য উপকারী।
1@use "sass:map";
2
3// Example: Return a map of spacing scale
4@function spacing-scale($base) {
5 @return (
6 'small': $base * 0.5,
7 'medium': $base,
8 'large': $base * 2
9 );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15 margin-bottom: map.get($scale, 'medium');
16}- ফাংশনটি একটি ম্যাপ ফেরত দেয়, এবং তারপর মানসমূহ
map.getব্যবহার করে নেওয়া হয়। এর ফলে আপনি ধারাবাহিক স্পেসিং সিস্টেম বজায় রাখতে পারেন।
শর্ত ও লুপসহ ফাংশন
@if, @else if, @else, @for, @each, ও @while সব ফাংশনের ভিতরে ব্যবহার করা যায়। আপনি শর্ত ও লুপ দিয়ে গণনার যুক্তি তৈরি করতে পারেন।
1// Example: Generate modular scale value using loop
2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
3 $result: $base;
4 @if $step == 0 {
5 @return $result;
6 }
7 @if $step > 0 {
8 @for $i from 1 through $step {
9 $result: $result * $ratio;
10 }
11 } @else {
12 @for $i from 1 through abs($step) {
13 $result: $result / $ratio;
14 }
15 }
16 @return $result;
17}
18
19.h1 {
20 font-size: modular-scale(3, 1rem, 1.333);
21}- এই ফাংশন একটি মডুলার স্কেল গণনা করে এবং ধাপ পজিটিভ হলে গুন করবে, নেগেটিভ হলে ভাগ করবে।
modular-scale(3, 1rem, 1.333)বেজ থেকে তিন ধাপ উপরের ফন্ট সাইজ ফেরত দেয়।
এরর হ্যান্ডলিং ও ওয়ার্নিংস (@error, @warn)
ভুল আর্গুমেন্ট বা অপ্রত্যাশিত অপারেশনে @error দিয়ে থামাতে পারেন এবং @warn দিয়ে সতর্কবার্তা দিতে পারেন। এর উদ্দেশ্য হচ্ছে ব্যবহারকারীদের আগেভাগেই সমস্যা সম্পর্কে অবহিত করা।
1@use "sass:math";
2@use "sass:meta";
3
4// Example: Validate input and throw an error for invalid units
5@function ensure-length($value) {
6 @if meta.type-of($value) != 'number' or math.is-unitless($value) {
7 @error "Expected a length with units, got #{$value}.";
8 }
9 @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14 width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21// // expect error: "Expected a length with units, got 10."
22// width: ensure-length(10);
23// }- যদি আপনি ভুল মান পাঠান, বিল্ড করার সময় এরর দেখানো হবে, এতে কারণ খুঁজে বের করা সহজ হবে। ফাংশনের ভিতরে চেক করার মাধ্যমে শুরুতেই বাগ ধরা সহজ হয়।
রঙ নির্দিষ্ট ফাংশন তৈরি করা
SASS-এ, আপনি বিভিন্ন ফাংশন একত্রিত করে যা রং নিয়ন্ত্রণ করে, আপনার নিজস্ব রঙের প্যালেট তৈরি করতে পারেন। পুরো প্রকল্প জুড়ে একটি সামঞ্জস্যপূর্ণ রঙের স্কিম ব্যবস্থাপনার জন্য এটি উপযোগী।
1@use "sass:color";
2@use "sass:list";
3
4// Example: Generate a color palette (tints and shades) from a base color
5@function palette($color, $steps: 5, $strength: 10%) {
6 $colors: ();
7 @for $i from 0 through $steps {
8 $amount: $i * $strength;
9 $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10 $tint: color.mix(white, $color, $amount);
11 $colors: list.append($colors, $shade);
12 $colors: list.append($colors, $tint);
13 }
14 @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20 background-color: list.nth($palette, 1);
21}- এই উদাহরণে,
color.mixব্যবহৃত হয়েছে, কালো দিয়ে মিশিয়ে শেড এবং সাদা দিয়ে মিশিয়ে টিন্ট তৈরি করতে। মানসমূহ একটি তালিকায় ফেরত আসে, এবংlist.nthব্যবহার করে এগুলিতে প্রবেশ করা যায়।
পারফরম্যান্স এবং কম্পাইল টাইম নিয়ে দ্রষ্টব্য
SASS ফাংশনগুলো কম্পাইল টাইমে হিসাব করা হয়। বড় লুপ, গভীর রিকার্শন বা বেশি ম্যাপ অপারেশন কম্পাইল টাইম বাড়িয়ে দেয়। ফাংশনগুলো ছোট ও সহজ রাখুন; বেশি জটিল প্রসেস প্রয়োজনে SASS-এর বাইরে, বিল্ড টুল বা প্রিপ্রসেসরে সম্পাদন করুন।
প্রায়োগিক ইউটিলিটি ফাংশন সংগ্রহ
এখানে কিছু সাধারণ ইউটিলিটি ফাংশন দেয়া হলো। এই কোড আসল প্রজেক্টে সঙ্গে সঙ্গে ব্যবহারযোগ্য হিসেবে তৈরি।
1@use "sass:math";
2
3// Example: Clamp a value between min and max
4@function clamp-value($value, $min, $max) {
5 @if $value < $min {
6 @return $min;
7 } @else if $value > $max {
8 @return $max;
9 }
10 @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15 @if math.unit($px) != "px" {
16 @error "px-to-rem requires a px value.";
17 }
18 @return ($px / $root) * 1rem;
19}clamp-valueএকটি মানের উপর সর্বোচ্চ ও সর্বনিম্ন সীমা আরোপ করে, এবংpx-to-remপিক্সেল মানকে রেমে রূপান্তর করে। এই দুটি ফাংশন উত্তরদায়ী ডিজাইন করতে প্রায়ই যে কাজগুলো লাগে তা সহজ করে তোলে।
@function ও মিক্সইন (@mixin) এর মধ্যে পছন্দ করা
ফাংশন মান ফেরত দেয়ার কাজে বিশেষায়িত, মিক্সইন CSS ব্লক আউটপুট করে। যদি যুক্তির ফলাফলে একটি মাত্র প্রপার্টি মান তৈরি হয়, ফাংশন ব্যবহার করুন; যদি পুরো স্টাইল ব্লক হয়, মিক্সইন ব্যবহার করুন।
1// Example: Function returns a value
2@function border-radius-value($size) {
3 @return $size * 1px;
4}
5
6// Example: Mixin outputs properties
7@mixin rounded($size) {
8 border-radius: border-radius-value($size);
9 -webkit-border-radius: border-radius-value($size);
10}
11.card {
12 @include rounded(8);
13}- ফাংশন সংখ্যার বা রঙের মতো মান ফেরত দিয়ে তা অন্য প্রপার্টিতে ব্যবহার করতে দেয়, মিক্সইন সরাসরি প্রোপার্টির গ্রুপ যুক্ত করে। সুনির্দিষ্টভাবে আলাদা রাখা ডিজাইনের রক্ষণাবেক্ষণ সহজ করে।
স্ট্রিং ম্যানিপুলেশন ও আউটপুট ফরম্যাট বিবেচনা
SASS-এ ইউনিটযুক্ত নাম্বার ও স্ট্রিং ব্যবহারে সতর্ক থাকুন। ইউনিটসহ নাম্বারে স্ট্রিং যোগ করলে অন্যরকম ফলাফল আসতে পারে। প্রয়োজনে unquote() বা স্ট্রিং ইন্টারপোলেশন (#{}) ব্যবহার করুন।
1@use "sass:math";
2
3// Example: Safely create a CSS value string
4@function px-percentage($px, $total) {
5 $percent: math.div($px, $total) * 100;
6 @return "#{$percent}%";
7}
8
9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11 $percent: math.div($px, $total) * 100;
12 // Round to 2 decimal places safely
13 $rounded: math.div(math.round($percent * 100), 100);
14 @return "#{$rounded}%";
15}- পার্সেন্টেজ স্ট্রিং হিসাবে ফেরত দিলে ইন্টারপোলেশন বা
roundদিয়ে স্পষ্টতা নিশ্চিত করুন। বাগ এড়াতে, গণনার ফলাফল স্ট্রিংয়ে যোগ করার সময় ডেটা টাইপ স্পষ্টভাবে পরিচালনা করুন।
টেস্ট ও ডকুমেন্টেশনে সেরা অভ্যাস
ফাংশন লেখার পর, ব্যবহার উদাহরণসহ ছোট SCSS ফাইল তৈরি করে টেস্ট করুন—এতে রক্ষণাবেক্ষণ সহজ হয়। প্রতিটি ফাংশনের জন্য ইনপুট টাইপ/ইউনিট, রিটার্ন টাইপ, কীভাবে ব্যর্থ হয় ও ব্যবহার উদাহরণ লিখে রাখতে পারেন।
1@use "sass:math";
2
3// Example: Inline "tests" (partial usage examples)
4// These can be compiled separately during development
5
6@function double($n) {
7 @return $n * 2;
8}
9
10@function px-to-rem($px, $root: 16px) {
11 @if math.unit($px) != "px" {
12 @error "px-to-rem requires a px value.";
13 }
14 @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19 width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24 font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";- 'প্রত্যাশিত আউটপুট'-এর ছোট উদাহরণসহ মন্তব্য রাখলে, ভবিষ্যতে রিফ্যাক্টরিংয়ের সময় পেছনে যাওয়া সহজে ধরা পড়ে। CI পরিবেশে স্বয়ংক্রিয় কম্পাইল ও আউটপুট চক্ষু-পর্যবেক্ষণ কার্যকর।
সারসংক্ষেপ
স্টাইলে পুনঃব্যবহারযোগ্যতা ও ধারাবাহিকতা বাড়াতে SASS ফাংশন শক্তিশালী উপায়। ফাংশনগুলো ছোট ও সহজ রাখুন, আর নিরাপত্তার জন্য @error ও @warn ব্যবহার করুন। রং, স্পেসিং, ও ইউনিট রূপান্তরের ইউটিলিটি ফাংশনগুলো একটি শেয়ার্ড লাইব্রেরিতে সংযুক্ত করা সুবিধাজনক। কম্পাইলের চাপ এড়াতে, দরকার হলে জটিল প্রসেসিং অন্য বিল্ড স্টেপে ভাগ করে নিন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।