Sass এর জন্য Built-in Functions

Sass কি?

Sass (Syntactically Awesome Stylesheets) হল একটি প্রিসপেসর (CSS Preprocessor) যা CSS এর একটি শক্তিশালী উন্নত সংস্করণ। এটি স্টাইলশীটের কোডকে আরও সহজ, পুনঃব্যবহারযোগ্য এবং কার্যকরী করার জন্য অনেক অতিরিক্ত বৈশিষ্ট্য সরবরাহ করে, যেমন ভেরিয়েবল, মিক্সিন, ইনহেরিটেন্স এবং নিয়ন্ত্রণ কাঠামো। Sass একটি CSS কোডকে আরও সংগঠিত এবং দ্রুত পরিচালনা করতে সাহায্য করে।

Sass ব্যবহারের ফলে আপনি আরও কম কোড লিখে এবং কোড পুনঃব্যবহার করে জটিল ডিজাইন তৈরি করতে পারেন। এটি অনেক শক্তিশালী built-in functions প্রদান করে, যা CSS-এর বিভিন্ন সমস্যা সমাধানে সহায়ক। এই ফাংশনগুলো মাধ্যমে আপনি আরও আধুনিক, দক্ষ এবং পরিষ্কার স্টাইলশীট তৈরি করতে পারেন।

Sass Built-in Functions

Sass অনেক built-in functions সরবরাহ করে, যা স্টাইলশীট লেখার প্রক্রিয়াকে অনেক সহজ এবং কার্যকরী করে তোলে। এই ফাংশনগুলো মূলত গণনা, স্ট্রিং ম্যানিপুলেশন, কালার ম্যানিপুলেশন, লিস্ট এবং ম্যাপ অপারেশন ইত্যাদি কাজ করার জন্য ব্যবহৃত হয়।

১. গণনা সম্পর্কিত ফাংশন (Mathematical Functions)

Sass গণনার জন্য অনেক কার্যকরী ফাংশন সরবরাহ করে, যা স্টাইলশীটের মধ্যে গণনা এবং পরিমাপ করতে সহায়তা করে।

• math.div(): দুটি মানের ভাগ (Division) করে।

  উদাহরণ:

  $width: 500px;
  $columns: 5;
  $column-width: math.div($width, $columns);
  

• math.mod(): দুটি সংখ্যার মধ্যে ভাগফল থেকে অবশিষ্টাংশ বের করে।

  উদাহরণ:

  $remainder: math.mod(10, 3); // Output: 1
  

• math.pow(): একটি সংখ্যার পাওয়ার বের করে।

  উদাহরণ:

  $power: math.pow(2, 3); // Output: 8
  

২. কালার সম্পর্কিত ফাংশন (Color Functions)

Sass-এ কালার ম্যানিপুলেশনের জন্য অনেক ফাংশন রয়েছে, যা ডিজাইনে বিভিন্ন রঙের শেড, ব্রাইটনেস বা কন্ট্রাস্ট পরিবর্তন করতে সাহায্য করে।

• lighten(): একটি রঙকে আলোকিত (lighten) করে।

  উদাহরণ:

  $color: #ff0000;
  $lighter-color: lighten($color, 20%);
  

• darken(): একটি রঙকে গা dark করে।

  উদাহরণ:

  $color: #ff0000;
  $darker-color: darken($color, 20%);
  

• mix(): দুটি রঙকে একসাথে মিশিয়ে একটি নতুন রঙ তৈরি করে।

  উদাহরণ:

  $color1: #ff0000;
  $color2: #0000ff;
  $mixed-color: mix($color1, $color2, 50%);
  

• rgba(): রঙের সাথে অ্যালফা ভ্যালু (অস্বচ্ছতা) যোগ করে।

  উদাহরণ:

  $color: rgba(255, 0, 0, 0.5);
  

৩. স্ট্রিং সম্পর্কিত ফাংশন (String Functions)

Sass স্ট্রিং ম্যানিপুলেশনেও বেশ কার্যকরী ফাংশন সরবরাহ করে।

• unquote(): একটি স্ট্রিং থেকে কোটেশন চিহ্ন (quotes) সরিয়ে দেয়।

  উদাহরণ:

  $str: "'Hello, World!'";
  $unquoted-str: unquote($str); // Output: Hello, World!
  

• quote(): একটি স্ট্রিংয়ের চারপাশে কোটেশন চিহ্ন যোগ করে।

  উদাহরণ:

  $str: Hello, World!;
  $quoted-str: quote($str); // Output: 'Hello, World!'
  

• str-length(): একটি স্ট্রিং এর দৈর্ঘ্য বের করে।

  উদাহরণ:

  $str: "Hello";
  $length: str-length($str); // Output: 5
  

৪. লিস্ট এবং ম্যাপ সম্পর্কিত ফাংশন (List and Map Functions)

Sass লিস্ট এবং ম্যাপের উপর বিভিন্ন অপারেশন করার জন্য অনেক ফাংশন সরবরাহ করে।

• nth(): একটি লিস্টের নির্দিষ্ট ইনডেক্সের মান বের করে।

  উদাহরণ:

  $colors: red, green, blue;
  $second-color: nth($colors, 2); // Output: green
  

• join(): দুটি লিস্ট একত্রিত করে একটি নতুন লিস্ট তৈরি করে।

  উদাহরণ:

  $list1: 1, 2, 3;
  $list2: 4, 5, 6;
  $joined-list: join($list1, $list2); // Output: 1, 2, 3, 4, 5, 6
  

• map-get(): একটি ম্যাপ থেকে একটি কিপেয়ার (key-value pair) বের করে।

  উদাহরণ:

  $map: (key1: value1, key2: value2);
  $value: map-get($map, key1); // Output: value1
  

৫. ডেটা সম্পর্কিত ফাংশন (Data Functions)

Sass ডেটা স্ট্রাকচার ম্যানিপুলেশন করার জন্যও কিছু ফাংশন প্রদান করে।

• length(): একটি লিস্ট বা স্ট্রিংয়ের দৈর্ঘ্য বের করে।

  উদাহরণ:

  $list: 1, 2, 3, 4;
  $length: length($list); // Output: 4
  

• compact(): একটি লিস্ট থেকে null বা false মানগুলো সরিয়ে দেয়।

  উদাহরণ:

  $list: 1, null, 3, false;
  $compact-list: compact($list); // Output: 1, 3
  

সারাংশ

Sass এর built-in functions ওয়েব ডেভেলপমেন্টে আরও কার্যকরী এবং সংগঠিত স্টাইলশীট তৈরি করতে সহায়তা করে। আপনি গণনা, কালার ম্যানিপুলেশন, স্ট্রিং ম্যানিপুলেশন, লিস্ট/ম্যাপ অপারেশন ইত্যাদি কাজ Sass এর বিভিন্ন ফাংশনের মাধ্যমে সহজেই করতে পারেন। এগুলো ব্যবহারের মাধ্যমে আপনি CSS কোডকে আরও সহজ, পুনঃব্যবহারযোগ্য, এবং পরিষ্কার করতে পারবেন, যা আপনার প্রকল্পের মান এবং পারফরম্যান্স বৃদ্ধি করতে সাহায্য করবে।

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 মূলত তিনটি বড় বিভাগে বিভক্ত করা যায়:

1. Color Functions
2. String Functions
3. List and Map Functions
4. 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 ম্যানিপুলেশন সহজে করতে পারেন।

Sass (Syntactically Awesome Stylesheets) এর পরিচিতি

Sass হল একটি প্রিপ্রসেসর যা CSS এর উপর ভিত্তি করে কাজ করে এবং অতিরিক্ত ফিচার সরবরাহ করে যেমন ভেরিয়েবলস, নেস্টিং, মিক্সিন্স, ফাংশন ইত্যাদি। এটি CSS এর একটি শক্তিশালী সংস্করণ যা কোডকে আরও সংক্ষিপ্ত এবং রিডেবল বানাতে সাহায্য করে।

Sass এ বেশ কিছু বিল্ট-ইন ফাংশন আছে যা আপনার স্টাইলশীট কোডে আরও কার্যকরীতা যোগ করতে পারে। এই গাইডে, আমরা String, Number, List, এবং Map ফাংশনগুলির ব্যবহার নিয়ে আলোচনা করব।

১. String Functions

Sass এর String Functions আপনাকে স্ট্রিংগুলোর সাথে কাজ করার জন্য নানা ধরনের ফাংশন প্রদান করে। এখানে কিছু সাধারণ স্ট্রিং ফাংশনের উদাহরণ দেওয়া হলো।

১.১. unquote()

এই ফাংশনটি একটি স্ট্রিং থেকে কোটেশন চিহ্ন সরিয়ে ফেলে।

$quoted-text: '"Hello, Sass!"';
$unquoted-text: unquote($quoted-text);

body {
  content: $unquoted-text; // Output: Hello, Sass!
}

১.২. quote()

এই ফাংশনটি একটি স্ট্রিংকে কোটেশন চিহ্নের মধ্যে আবদ্ধ করে।

$unquoted-text: Hello, Sass!;
$quoted-text: quote($unquoted-text);

body {
  content: $quoted-text; // Output: "Hello, Sass!"
}

১.৩. str-length()

এই ফাংশনটি একটি স্ট্রিং এর দৈর্ঘ্য রিটার্ন করে।

$my-text: "Hello, world!";
$text-length: str-length($my-text);

body {
  content: $text-length; // Output: 13
}

১.৪. str-index()

এই ফাংশনটি একটি স্ট্রিং এর মধ্যে একটি নির্দিষ্ট সাবস্ট্রিং খুঁজে বের করে এবং এর প্রথম পজিশন রিটার্ন করে।

$my-text: "Hello, world!";
$index: str-index($my-text, "world");

body {
  content: $index; // Output: 8
}

২. Number Functions

Sass এর Number Functions আপনাকে সংখ্যা নিয়ে কাজ করার জন্য বেশ কিছু শক্তিশালী ফাংশন প্রদান করে।

২.১. abs()

এই ফাংশনটি একটি সংখ্যার অ্যাবসোলিউট মান রিটার্ন করে।

$number: -5;
$absolute-number: abs($number);

body {
  content: $absolute-number; // Output: 5
}

২.২. ceil()

এই ফাংশনটি একটি ভগ্নাংশ সংখ্যাকে উপরের পূর্ণসংখ্যায় রাউন্ড করে।

$number: 4.3;
$rounded-number: ceil($number);

body {
  content: $rounded-number; // Output: 5
}

২.৩. floor()

এই ফাংশনটি একটি ভগ্নাংশ সংখ্যাকে নীচের পূর্ণসংখ্যায় রাউন্ড করে।

$number: 4.7;
$rounded-number: floor($number);

body {
  content: $rounded-number; // Output: 4
}

২.৪. percentage()

এই ফাংশনটি একটি সংখ্যা প্রাপ্তির শতাংশ রিটার্ন করে।

$number: 0.5;
$percentage: percentage($number);

body {
  content: $percentage; // Output: 50%
}

৩. List Functions

Sass এর List Functions আপনাকে তালিকা (arrays) নিয়ে কাজ করার জন্য ব্যবহার করতে পারেন।

৩.১. length()

এই ফাংশনটি একটি তালিকার দৈর্ঘ্য রিটার্ন করে।

$colors: red, blue, green;
$list-length: length($colors);

body {
  content: $list-length; // Output: 3
}

৩.২. nth()

এই ফাংশনটি তালিকার একটি নির্দিষ্ট পজিশনের আইটেম রিটার্ন করে।

$colors: red, blue, green;
$second-color: nth($colors, 2);

body {
  content: $second-color; // Output: blue
}

৩.৩. join()

এই ফাংশনটি দুটি বা ততোধিক তালিকা একত্রিত করে একটি নতুন তালিকা তৈরি করে।

$list1: red, blue;
$list2: green, yellow;
$combined-list: join($list1, $list2);

body {
  content: $combined-list; // Output: red, blue, green, yellow
}

৩.৪. index()

এই ফাংশনটি একটি তালিকায় একটি নির্দিষ্ট উপাদান খুঁজে বের করে এবং তার ইনডেক্স রিটার্ন করে।

$colors: red, blue, green;
$index: index($colors, blue);

body {
  content: $index; // Output: 2
}

৪. Map Functions

Sass এর Map Functions আপনাকে key-value পেয়ার নিয়ে কাজ করার জন্য সাহায্য করে।

৪.১. map-get()

এই ফাংশনটি একটি মাপ (map) এর মধ্যে একটি নির্দিষ্ট কী এর মান রিটার্ন করে।

$colors: (red: #ff0000, blue: #0000ff, green: #00ff00);
$blue-color: map-get($colors, blue);

body {
  background-color: $blue-color; // Output: #0000ff
}

৪.২. map-set()

এই ফাংশনটি একটি মাপে একটি নতুন কী-ভ্যালু পেয়ার সেট করে।

$colors: (red: #ff0000, blue: #0000ff);
$colors: map-set($colors, yellow, #ffff00);

body {
  background-color: map-get($colors, yellow); // Output: #ffff00
}

৪.৩. map-keys()

এই ফাংশনটি একটি মাপের সমস্ত কীগুলির একটি তালিকা রিটার্ন করে।

$colors: (red: #ff0000, blue: #0000ff);
$keys: map-keys($colors);

body {
  content: $keys; // Output: red, blue
}

৪.৪. map-values()

এই ফাংশনটি একটি মাপের সমস্ত মানের একটি তালিকা রিটার্ন করে।

$colors: (red: #ff0000, blue: #0000ff);
$values: map-values($colors);

body {
  content: $values; // Output: #ff0000, #0000ff
}

সারাংশ

Sass এর String, Number, List, এবং Map ফাংশনগুলির মাধ্যমে আপনি স্টাইলশীট কোডের কার্যকারিতা বৃদ্ধি করতে পারেন। এই ফাংশনগুলি আপনাকে ডেটা ম্যানিপুলেশন, গণনা, তালিকা এবং মানের সাথে কাজ করতে সহায়তা করে। String ফাংশন স্ট্রিং সংশোধন এবং ম্যানিপুলেশনের জন্য, Number ফাংশন গণনা এবং সংখ্যা নিয়ে কাজ করার জন্য, List ফাংশন তালিকা প্রক্রিয়াকরণ এবং Map ফাংশন ডেটার key-value সম্পর্ক ব্যবস্থাপনার জন্য ব্যবহৃত হয়। Sass-এর এই ফাংশনগুলো CSS লেখার সময় কোডকে আরও রিডেবল, কমপ্যাক্ট এবং সহজে রক্ষণাবেক্ষণযোগ্য করে তোলে।

সাস (Sass) এর পরিচিতি

Sass (Syntactically Awesome Stylesheets) হল একটি CSS প্রিপ্রসেসর, যা CSS কে আরও শক্তিশালী এবং কার্যকরী বানাতে সাহায্য করে। Sass-এ ব্যবহারকারীরা variables, mixins, functions, nesting, এবং আরও অনেক ফিচার ব্যবহার করতে পারেন, যা CSS লেখার সময় পুনঃব্যবহারযোগ্যতা এবং মানোন্নয়ন সম্ভব করে তোলে। Built-in functions হল সাসের এক গুরুত্বপূর্ণ বৈশিষ্ট্য যা CSS কাস্টমাইজেশনে সাহায্য করে এবং ডেভেলপারদের কাজ সহজ করে।

Sass-এ কিছু built-in functions প্রদান করা হয় যা বিভিন্ন ধরনের কাজ করার জন্য ব্যবহৃত হয়, যেমন রং, গণনা, স্ট্রিং এবং লিস্ট সম্পর্কিত কাজ ইত্যাদি। এই ফাংশনগুলির সাহায্যে CSS কোড আরও ক্লিন, ডায়নামিক এবং মডুলার করা যায়।

Sass Built-in Functions এর ব্যবহার

Sass এর built-in functions বিভিন্ন ধরনের কাজ সহজে করার জন্য ব্যবহৃত হয়। এখানে কিছু জনপ্রিয় built-in functions এর ব্যবহার আলোচনা করা হবে।

১. Color Functions

Sass-এর color functions আপনাকে রং সম্পর্কিত বিভিন্ন কাজ করতে সাহায্য করে। এই ফাংশনগুলোতে lighten(), darken(), mix(), saturate(), ইত্যাদি অন্তর্ভুক্ত।

lighten() এবং darken():

এই ফাংশনগুলো ব্যবহার করে আপনি কোন নির্দিষ্ট রংকে হালকা বা গা dark করতে পারেন।

$primary-color: #3498db;

.button {
  background-color: lighten($primary-color, 20%); // 20% হালকা রঙ
  color: darken($primary-color, 10%); // 10% গা dark রঙ
}

এখানে, lighten() ফাংশনটি মূল রঙটিকে ২০% হালকা করে, এবং darken() ফাংশনটি ১০% গা dark করে দেয়।

mix():

mix() ফাংশন দুটি রঙ মিশিয়ে নতুন একটি রঙ তৈরি করতে ব্যবহার হয়।

$color1: #3498db;
$color2: #e74c3c;

.button {
  background-color: mix($color1, $color2, 50%); // দুটি রঙ ৫০% মিশ্রিত
}

এখানে, mix() ফাংশন দুটি রঙ মিশিয়ে ৫০% অনুপাতে একটি নতুন রঙ তৈরি করে।

২. Math Functions

Sass আপনাকে গণনার জন্য কিছু built-in functions প্রদান করে, যেমন +, -, *, / ইত্যাদি।

percentage():

এই ফাংশনটি সংখ্যাকে শতাংশে রূপান্তর করতে ব্যবহৃত হয়।

$width: 500px;
$parent-width: 1000px;

.child {
  width: percentage($width / $parent-width); // 50%
}

এখানে, percentage() ফাংশনটি গণনা করা অনুপাতের ফলাফলকে শতকরা হিসাবে রূপান্তর করে।

abs():

abs() ফাংশনটি একটি সংখ্যা থেকে তার মানের (অবিচ্ছিন্ন) পরিমাণ প্রদান করে।

$margin: -20px;

.container {
  margin-top: abs($margin); // 20px
}

এখানে, abs() ফাংশনটি নেতিবাচক মানের পরিমাণ ২০px প্রদান করে।

৩. String Functions

Sass আপনাকে স্ট্রিং নিয়ে কাজ করার জন্য কিছু built-in functions প্রদান করে। এই ফাংশনগুলির মধ্যে unquote(), quote(), str-length() ইত্যাদি অন্তর্ভুক্ত।

quote() এবং unquote():

quote() ফাংশনটি একটি স্ট্রিংকে উদ্ধৃতির মধ্যে রাখে, আর unquote() ফাংশনটি উদ্ধৃতির বাইরে এনে দেয়।

$font-family: Helvetica;

h1 {
  font-family: quote($font-family); // "Helvetica"
}

h2 {
  font-family: unquote("Arial"); // Arial
}

এখানে, quote() এবং unquote() স্ট্রিংয়ের উদ্ধৃতি পরিবর্তন করতে ব্যবহৃত হয়েছে।

str-length():

str-length() ফাংশনটি একটি স্ট্রিংয়ের দৈর্ঘ্য নির্ধারণ করে।

$text: "Hello, World!";
$length: str-length($text);

p {
  font-size: $length; // 13px
}

এখানে, str-length() ফাংশনটি "Hello, World!" স্ট্রিংয়ের দৈর্ঘ্য ১৩ রিটার্ন করে।

৪. List Functions

Sass-এ list সম্পর্কিত কিছু ফাংশন রয়েছে, যেমন nth(), join(), length() ইত্যাদি, যা লিস্ট বা অ্যারে সম্পর্কিত কাজ করতে ব্যবহৃত হয়।

nth():

nth() ফাংশনটি একটি নির্দিষ্ট ইনডেক্সে থাকা মান রিটার্ন করে।

$list: 10px, 20px, 30px;

.item {
  margin-top: nth($list, 2); // 20px
}

এখানে, nth() ফাংশনটি $list থেকে দ্বিতীয় মানটি রিটার্ন করেছে, যা ২০px।

length():

length() ফাংশনটি একটি লিস্ট বা অ্যারের দৈর্ঘ্য রিটার্ন করে।

$list: 10px, 20px, 30px;
$length: length($list); // 3

.container {
  width: $length * 10px; // 30px
}

এখানে, length() ফাংশনটি $list এর দৈর্ঘ্য ৩ রিটার্ন করেছে এবং সেটি পরে গণনায় ব্যবহৃত হয়েছে।

৫. Other Useful Functions

map-get():

map-get() ফাংশনটি একটি মেপ (অবজেক্ট) থেকে একটি নির্দিষ্ট কীগুলোর মান রিটার্ন করে।

$map: (primary: #3498db, secondary: #e74c3c);

.button {
  background-color: map-get($map, primary); // #3498db
}

এখানে, map-get() ফাংশনটি $map থেকে primary কীর মান রিটার্ন করেছে।

random():

random() ফাংশনটি একটি র্যান্ডম সংখ্যা রিটার্ন করে।

$random-num: random(100);

.container {
  width: $random-num + px;
}

এখানে, random() ফাংশনটি ১ থেকে ১০০ এর মধ্যে একটি র্যান্ডম সংখ্যা রিটার্ন করেছে।

সারাংশ

Sass Built-in Functions ব্যবহার করে CSS আরও শক্তিশালী এবং ডায়নামিক করা যায়। এই ফাংশনগুলো ব্যবহার করে আপনি রং, গণনা, স্ট্রিং, লিস্ট এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনি CSS কোডকে আরও কার্যকরী এবং পুনঃব্যবহারযোগ্য করতে পারেন, এবং ডেভেলপারদের কাজের গতি এবং কোডের মান উন্নত করতে সাহায্য করে। Sass এর বেসিক ফিচারগুলো, যেমন variables, mixins, functions এবং nesting এর সাথে এই built-in functions ব্যবহারের মাধ্যমে আপনি আরও উন্নত CSS তৈরি করতে পারবেন।

সাস (Sass) Functions: একটি পরিচিতি

Sass (Syntactically Awesome Stylesheets) হল CSS প্রিপ্রসেসর যা CSS-এর লেখার স্টাইলকে আরও কার্যকর এবং সহজ করে তোলে। Sass-এ functions ব্যবহার করা হয় কাস্টম স্টাইলস তৈরি করতে, যেখানে নির্দিষ্ট ইনপুটের ভিত্তিতে আউটপুট রিটার্ন করা হয়। এটা CSS কাস্টমাইজেশনে সহায়তা করে এবং কোডকে আরও পরিষ্কার এবং পুনঃব্যবহারযোগ্য করে তোলে।

Sass-এর ফাংশনগুলি আপনাকে গাণিতিক গণনা, রঙ পরিবর্তন, অথবা এমন কিছু কাজ করার সুযোগ দেয় যা সাধারন CSS দিয়ে করা সম্ভব নয়। নিচে Sass functions এর কিছু বাস্তব উদাহরণ দেওয়া হয়েছে।

১. গাণিতিক অপারেশন: দুটি মান যোগ করা

Sass-এ ফাংশন ব্যবহার করে গাণিতিক গণনা করা সম্ভব। আপনি রঙ বা সাইজের সাথে সম্পর্কিত গণনা করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে দুটি সংখ্যার যোগফল হিসাব করা হচ্ছে।

// Function to add two numbers
@function add($a, $b) {
  @return $a + $b;
}

// Usage
.container {
  width: add(100px, 50px);  // Output: width: 150px;
}

এখানে, add() ফাংশন দুটি সংখ্যার যোগফল রিটার্ন করছে, যা .container ক্লাসের জন্য ব্যবহার করা হয়েছে।

২. রঙের সাথে কাজ করা: রঙের হালকা/গা dark ় করা

Sass রঙের সাথে কাজ করার জন্য ফাংশন ব্যবহার করা যায়, যেমন রঙের উজ্জ্বলতা পরিবর্তন করা বা হালকা/গা dark ় করা।

// Function to lighten a color
@function lighten-color($color, $amount) {
  @return lighten($color, $amount);
}

// Usage
.button {
  background-color: lighten-color(#ff6347, 20%);  // Lightens the tomato color by 20%
}

এখানে, lighten-color() ফাংশন রঙের উজ্জ্বলতা পরিবর্তন করছে এবং .button ক্লাসের জন্য একটি হালকা টমেটো রঙ প্রদান করছে।

৩. প্রস্থ এবং উচ্চতা গণনা করা

একটি সাধারণ ব্যবহারিক পরিস্থিতিতে, আপনি কোনো ব্লকের প্রস্থ এবং উচ্চতা সমন্বয় করতে চাইতে পারেন। এই কাজটি ফাংশন ব্যবহার করে সহজভাবে করা যায়।

// Function to calculate padding
@function calculate-padding($width, $height) {
  @return ($width + $height) / 2;
}

// Usage
.element {
  padding: calculate-padding(20px, 30px);  // Output: padding: 25px;
}

এখানে, calculate-padding() ফাংশনটি দুইটি মানের (প্রস্থ এবং উচ্চতা) যোগফল করে তাদের গড় বের করছে এবং .element ক্লাসের জন্য প্যাডিং সেট করছে।

৪. ফন্ট সাইজ গণনা

আপনি যদি responsive design তৈরি করেন, তবে ফন্ট সাইজের জন্য একটি ফাংশন তৈরি করতে পারেন যা নির্দিষ্ট স্ক্রীন সাইজের উপর ভিত্তি করে মান দেয়।

// Function to calculate font size based on viewport width
@function responsive-font-size($base-size, $factor) {
  @return $base-size * $factor;
}

// Usage
.heading {
  font-size: responsive-font-size(16px, 2);  // Output: font-size: 32px;
}

এখানে, responsive-font-size() ফাংশনটি বেস ফন্ট সাইজ এবং ফ্যাক্টর দ্বারা গুণফল বের করছে, যা .heading ক্লাসের জন্য ফন্ট সাইজ তৈরি করছে।

৫. অবশ্যই ব্যবহারযোগ্য রঙের স্কিম তৈরি করা

আপনি যদি বিভিন্ন ধরনের রঙের স্কিম তৈরি করতে চান (যেমন, প্রধান রঙ, সেকেন্ডারি রঙ ইত্যাদি), তবে Sass ফাংশন ব্যবহার করে আপনি স্বয়ংক্রিয়ভাবে বিভিন্ন রঙ তৈরি করতে পারেন।

// Function to generate a color scheme
@function generate-scheme($base-color) {
  $light: lighten($base-color, 20%);
  $dark: darken($base-color, 20%);
  @return ($light, $base-color, $dark);
}

// Usage
$colors: generate-scheme(#ff6347); // Generate a scheme from tomato color
.button {
  background-color: nth($colors, 2);  // Use the base color from the scheme
}

এখানে, generate-scheme() ফাংশনটি একটি বেস রঙ দিয়ে তিনটি রঙের স্কিম তৈরি করছে—একটি হালকা, একটি বেস, এবং একটি গা dark ় রঙ। এবং .button ক্লাসে মধ্যবর্তী রঙটি ব্যবহার করা হয়েছে।

৬. কাস্টম রিস্পন্সিভ রেঞ্জ নির্ধারণ

আপনি যদি ফন্ট সাইজ বা মার্জিনের জন্য রেসপনসিভ সিস্টেম তৈরি করতে চান, তবে এই ফাংশনটি সাহায্য করতে পারে।

// Function to create responsive margins
@function responsive-margin($base-margin, $factor) {
  @return $base-margin * $factor;
}

// Usage
.container {
  margin: responsive-margin(10px, 2);  // Output: margin: 20px;
}

এখানে, responsive-margin() ফাংশনটি একটি বেস মার্জিন এবং একটি ফ্যাক্টর নিয়ে কাজ করছে, যা মার্জিনের মানের উপর ভিত্তি করে মান রিটার্ন করছে।

সারাংশ

Sass Functions CSS-এর কার্যকারিতা বাড়াতে সাহায্য করে এবং কোডকে আরও পুনঃব্যবহারযোগ্য, রিডেবল এবং কার্যকরী করে তোলে। আপনি গাণিতিক অপারেশন, রঙের সাথে কাজ, ফন্ট সাইজ গণনা, এবং রেসপনসিভ ডেটা এর জন্য ফাংশন তৈরি করতে পারেন যা CSS লেখার সময় আপনার প্রচেষ্টাকে সহজ করে দেয়। এই ফাংশনগুলোকে ব্যবহার করে সাস-এর ক্ষমতা আরও ব্যাপকভাবে সম্প্রসারিত করা যায়, এবং উন্নত ডিজাইন সিস্টেম তৈরি করা সম্ভব হয়।