সাস (Sass) এবং CSS এর মধ্যে পার্থক্য
CSS (Cascading Style Sheets) এবং Sass (Syntactically Awesome Stylesheets) দুটি ওয়েব ডিজাইন এবং স্টাইলিং ভাষা হলেও, তাদের মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে। Sass একটি CSS প্রিপ্রসেসর, যা CSS এর সাথে আরও কিছু নতুন ফিচার যোগ করে। নিচে Sass এবং CSS এর মধ্যে প্রধান পার্থক্যগুলো আলোচনা করা হল:
১. Syntax (সিনট্যাক্স)
CSS একটি স্ট্যান্ডার্ড স্টাইল শিট ভাষা যা HTML ডকুমেন্টের মধ্যে বা আলাদা .css ফাইলে লেখা হয়। CSS এর সিনট্যাক্স সরল এবং সহজ, তবে এটি কিছু সীমাবদ্ধতা রাখে, যেমন ভেরিয়েবল এবং লজিকাল অপারেশন সমর্থন করে না।
Sass এর সিনট্যাক্স CSS এর ওপর ভিত্তি করে, কিন্তু এটি আরও শক্তিশালী এবং ব্যবহারে সুবিধাজনক। Sass ভেরিয়েবল, মিক্সিন, এবং নেস্টিং এর মতো ফিচার সমর্থন করে, যা CSS এর সীমাবদ্ধতাকে ছাড়িয়ে যায়।
CSS Syntax Example:
.button {
background-color: blue;
color: white;
}
Sass Syntax Example:
$button-color: blue;
$font-color: white;
.button {
background-color: $button-color;
color: $font-color;
}
এখানে, Sass-এ $ চিহ্ন ব্যবহার করে ভেরিয়েবল ডিফাইন করা হয়েছে যা CSS-এ সম্ভব নয়।
২. Variables (ভেরিয়েবলস)
CSS এ, আপনি স্টাইল প্রোপার্টি ভ্যালুগুলি পুনরায় ব্যবহার করতে পারেন না, যদি না সেগুলি কোডের মধ্যে পুনরাবৃত্তি করা হয়। তবে Sass এ, আপনি ভেরিয়েবল ব্যবহার করতে পারেন যাতে একাধিক জায়গায় একই ভ্যালু পুনরায় ব্যবহৃত হতে পারে।
CSS Example:
.button {
background-color: blue;
color: white;
}
Sass Example:
$button-color: blue;
$font-color: white;
.button {
background-color: $button-color;
color: $font-color;
}
এখানে, Sass-এ $button-color এবং $font-color ভেরিয়েবল ব্যবহার করা হয়েছে যা পরবর্তী সময়ে সহজেই পরিবর্তন করা যেতে পারে।
৩. Nesting (নেস্টিং)
CSS এ স্টাইল শিটের মধ্যে স্টাইলগুলি একে অপরের সাথে সম্পর্কিত করার জন্য সঠিকভাবে নেস্টিং করা কঠিন। Sass এর মাধ্যমে আপনি স্টাইলের মধ্যে স্টাইল নেস্ট করতে পারেন, যা কোডের পড়তে সহজ এবং সংগঠিত রাখে।
CSS Example:
.button {
background-color: blue;
}
.button:hover {
background-color: darkblue;
}
Sass Example:
.button {
background-color: blue;
&:hover {
background-color: darkblue;
}
}
এখানে, Sass-এ & চিহ্ন ব্যবহার করে নেস্টিং করা হয়েছে, যা কোডের কমপ্লেক্সিটি কমিয়ে দেয়।
৪. Mixins (মিক্সিনস)
CSS এ কোনও কোড ব্লক পুনরায় ব্যবহার করতে হলে, আপনাকে সেটি প্রতিবার কপি-পেস্ট করতে হয়। তবে Sass এ, আপনি mixins ব্যবহার করতে পারেন, যা একাধিক স্টাইল প্রোপার্টি নিয়ে এক্সট্রা ফাংশনালিটি যোগ করে এবং সেগুলো একাধিক জায়গায় ব্যবহার করা যায়।
CSS Example:
.button {
background-color: blue;
padding: 10px;
}
Sass Example with Mixin:
@mixin button-styles {
background-color: blue;
padding: 10px;
}
.button {
@include button-styles;
}
এখানে, Sass এর @mixin এবং @include ব্যবহার করে একাধিক শৈলী একটি মিক্সিন হিসেবে ব্যবহার করা হয়েছে।
৫. Partials and Imports (পারশিয়ালস এবং ইম্পোর্ট)
CSS এ, আপনি একাধিক স্টাইল শিট ফাইল তৈরি করতে পারেন, তবে সেগুলো একসাথে লোড করতে আপনাকে HTML ফাইলের মধ্যে প্রতিটি ফাইলের লিংক দিতে হয়। Sass এ, আপনি partials ব্যবহার করতে পারেন, যা ছোট ফাইলের মধ্যে কোড ভাগ করে নেয় এবং সেগুলোকে একটি মূল ফাইলে একত্রিত করতে পারে।
Sass Example with Partials:
- _variables.scss (partial):
$button-color: blue;
$font-color: white;
- styles.scss (main file):
@import 'variables';
.button {
background-color: $button-color;
color: $font-color;
}
এখানে, Sass এর @import ডিরেকটিভ ব্যবহার করে ছোট ছোট অংশে কোড ভাগ করা হয়েছে এবং মূল ফাইলে একত্রিত করা হয়েছে।
৬. Inheritance (উত্তরণ)
CSS এ, একাধিক ক্লাস বা সিলেক্টরের মধ্যে সাদৃশ্য থাকা সত্ত্বেও, কোড পুনরায় ব্যবহার করা বেশ কঠিন। তবে Sass এ, আপনি inheritance ব্যবহার করে একাধিক সিলেক্টরের মধ্যে স্টাইলকে ভাগ করতে পারেন।
CSS Example:
.button {
background-color: blue;
}
.submit-button {
background-color: green;
}
Sass Example with Inheritance:
.button {
background-color: blue;
}
.submit-button {
@extend .button;
background-color: green;
}
এখানে, Sass এর @extend ডিরেকটিভ ব্যবহার করা হয়েছে, যা .submit-button কে .button এর স্টাইল উত্তরাধিকারসূত্রে পেতে সাহায্য করে।
৭. Mathematical Operations (গণিতীয় অপারেশন)
CSS-এ গণিতীয় অপারেশন সরাসরি করা সম্ভব নয়, তবে Sass-এ সহজেই গণনা করা যায়। এর মাধ্যমে আপনি প্যাকিং, মার্জিন বা অন্যান্য স্টাইল প্রপার্টির মান গণনা করতে পারেন।
Sass Example:
$base-size: 10px;
$size: $base-size * 2;
.button {
font-size: $size;
}
এখানে, Sass গণিতীয় অপারেশন (*, /, +, -) ব্যবহার করে ভেরিয়েবল ভিত্তিক গণনা করছে।
সারাংশ
Sass একটি শক্তিশালী CSS প্রিপ্রসেসর যা CSS-এ একাধিক উন্নত ফিচার যোগ করে, যেমন ভেরিয়েবল, মিক্সিন, নেস্টিং, এবং গণিতীয় অপারেশন। Sass এবং CSS এর মধ্যে পার্থক্য হলো:
- Sass এর মধ্যে ভেরিয়েবল, মিক্সিন, নেস্টিং, ইম্পোর্ট এবং ইনহেরিটেন্সের মতো শক্তিশালী বৈশিষ্ট্য রয়েছে।
- CSS একটি সরল স্টাইলিং ভাষা, যেখানে Sass অনেক বেশি কার্যকরী এবং ফাংশনাল সুবিধা প্রদান করে।
Sass ব্যবহারের মাধ্যমে আপনি কোডকে আরো সংক্ষিপ্ত, রিডেবল এবং পুনঃব্যবহারযোগ্য করতে পারেন।
