Sass কি?

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

Sass (Syntactically Awesome Stylesheets) হল একটি প্রি-প্রসেসর যা CSS (Cascading Style Sheets) এর জন্য একটি উন্নত এবং শক্তিশালী প্রোগ্রামিং ভাষা। এটি CSS এর উপর অতিরিক্ত বৈশিষ্ট্য যোগ করে, যা আপনাকে আরও রিয়েবেল, স্কেলেবল এবং সঠিক স্টাইল শীট কোড লেখার সুযোগ দেয়। Sass মূলত CSS এর মতো স্টাইল শীট তৈরি করার একটি সুবিধাজনক উপায়, তবে এতে কিছু অতিরিক্ত ফিচার রয়েছে যা কোডকে আরও কার্যকরী এবং সংক্ষিপ্ত করতে সহায়তা করে।

Sass স্টাইল শীট কোডের পুনঃব্যবহারযোগ্যতা, স্কোপিং, এবং মডুলারিটি উন্নত করে এবং CSS কোডিংকে আরও দক্ষ এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।

Sass এর বৈশিষ্ট্য

Sass-এ CSS এর পাশাপাশি কিছু অতিরিক্ত বৈশিষ্ট্য প্রদান করা হয়, যা CSS কোডিংকে আরও শক্তিশালী এবং ফ্লেক্সিবল করে তোলে। নিম্নে কিছু বৈশিষ্ট্য দেওয়া হল:

১. নেস্টিং (Nesting)

CSS-এ সাধারণত স্টাইল শীটে সিলেক্টরগুলি একে অপরের মধ্যে নেস্ট করা যায় না, কিন্তু Sass এর মাধ্যমে আপনি CSS সিলেক্টরগুলিকে নেস্ট করতে পারেন, যা কোডের রিডেবিলিটি এবং গঠন আরো পরিষ্কার করে তোলে।

উদাহরণ:

nav {
  ul {
    list-style-type: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
  }
}

এখানে, nav, ul, li, এবং a সিলেক্টরগুলিকে নেস্ট করা হয়েছে, যাতে কোডের স্ট্রাকচার পরিষ্কার হয় এবং মেইন্টেন করা সহজ হয়।

২. ভেরিয়েবল (Variables)

Sass ভেরিয়েবলগুলির মাধ্যমে আপনি CSS প্রোপার্টি মানগুলিকে পুনঃব্যবহারযোগ্য এবং কনফিগারেবল করতে পারেন। এটি কোডে রঙ, ফন্ট, মাপ, অথবা অন্যান্য মান সংরক্ষণ করতে সহায়তা করে।

উদাহরণ:

$primary-color: #3498db;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

এখানে, $primary-color এবং $font-size ভেরিয়েবলগুলির মাধ্যমে রঙ এবং ফন্ট সাইজ সঠিকভাবে ব্যবহার করা হয়েছে। এইভাবে আপনি মান পরিবর্তন করার সময় শুধুমাত্র ভেরিয়েবলটি পরিবর্তন করতে পারবেন, যা কোডকে আরও স্থিতিশীল এবং সহজে রক্ষণাবেক্ষণযোগ্য করে তোলে।

৩. মিক্সিন (Mixins)

Sass এর মিক্সিন ফিচার আপনাকে পুনরাবৃত্ত কোড লেখা থেকে রক্ষা করে। মিক্সিনের মাধ্যমে আপনি কোড ব্লকগুলো সংজ্ঞায়িত করতে পারেন এবং পরে সেগুলোকে ডিফাইন করা স্টাইল শীটে ব্যবহার করতে পারেন।

উদাহরণ:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box { 
  @include border-radius(10px);
}

এখানে, border-radius এর জন্য একটি মিক্সিন তৈরি করা হয়েছে এবং .box ক্লাসে সেই মিক্সিন ব্যবহার করা হয়েছে।

৪. ইনহেরিটেন্স (Inheritance)

Sass এ @extend ডিরেকটিভ ব্যবহৃত হয়, যা এক ক্লাসের বৈশিষ্ট্য অন্য ক্লাসে উত্তরাধিকারসূত্রে পেতে সাহায্য করে। এর মাধ্যমে CSS কোডের পুনরাবৃত্তি কমানো সম্ভব হয়।

উদাহরণ:

%button-style {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
}

.button-primary {
  @extend %button-style;
  border-radius: 5px;
}

.button-secondary {
  @extend %button-style;
  background-color: #2ecc71;
}

এখানে, %button-style নামে একটি placeholder সিলেক্টর তৈরি করা হয়েছে, যা .button-primary এবং .button-secondary ক্লাসে উত্তরাধিকারসূত্রে ব্যবহার করা হয়েছে। এতে কোড পুনরাবৃত্তি কমে যায়।

৫. পার্সেল (Partials)

Sass এ আপনি স্টাইল শীটের কিছু অংশকে আলাদা আলাদা ফাইল হিসেবে ভাগ করতে পারেন এবং এগুলোকে partials হিসেবে ব্যবহার করতে পারেন। এতে পুরো প্রোজেক্টের কোড একক ফাইলে না থেকে আরও ভাগ হয়ে যায় এবং রক্ষণাবেক্ষণ সহজ হয়।

উদাহরণ:

// _colors.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

// _buttons.scss
.button {
  padding: 10px 20px;
  background-color: $primary-color;
}

এখন আপনি এই পাটিয়ালগুলোকে মূল style.scss ফাইলে ইমপোর্ট করতে পারেন:

@import 'colors';
@import 'buttons';

Sass এর সাথে CSS এর পার্থক্য

Sass ইনস্টলেশন এবং ব্যবহার

Sass ইনস্টল এবং ব্যবহার করার জন্য নিচের পদক্ষেপগুলি অনুসরণ করতে হবে:

১. Sass ইনস্টল করা:

Sass ব্যবহার করতে হলে, প্রথমে এটি ইনস্টল করতে হবে। আপনি npm অথবা Yarn ব্যবহার করে এটি ইনস্টল করতে পারেন।

npm ব্যবহার করে Sass ইনস্টল:

npm install -g sass

২. Sass কম্পাইল করা:

Sass ফাইলকে CSS ফাইলে কম্পাইল করতে পারেন নিচের কমান্ডের মাধ্যমে:

sass input.scss output.css

এতে input.scss ফাইলটি কম্পাইল হয়ে output.css ফাইলে রূপান্তরিত হবে।

৩. Sass ওয়াচ মোড:

Sass এর ওয়াচ মোড ব্যবহার করলে, আপনি যখনই SCSS ফাইলটি পরিবর্তন করবেন, এটি স্বয়ংক্রিয়ভাবে CSS ফাইলে রূপান্তরিত হবে।

sass --watch input.scss:output.css

সারাংশ

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