CSS এর মতো Sass কোড লেখা

সাস (Sass) কি?

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

Sass দুটি সিনট্যাক্সে কাজ করে:

• SCSS (Sassy CSS) - যা CSS এর মতোই, তবে Sass এর অতিরিক্ত ফিচার ব্যবহার করতে পারে।
• Sass (Indented Syntax) - যেখানে ইনডেন্টেশন ব্যবহার করে স্টাইল লেখা হয়।

এখানে আমরা SCSS সিনট্যাক্সের উপর ভিত্তি করে CSS এর মতো Sass কোড লেখা নিয়ে আলোচনা করব।

১. Sass ভ্যারিয়েবলস ব্যবহার করা

CSS এর মতো সরাসরি ভ্যারিয়েবল ব্যবহার করা যায় না, তবে Sass আপনাকে ভ্যারিয়েবল ব্যবহার করার সুযোগ দেয়, যা কোডকে আরও ডাইনামিক এবং রিইউসেবল করে তোলে।

উদাহরণ:

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

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

এখানে, $primary-color এবং $font-size ভ্যারিয়েবলগুলি ব্যবহার করা হয়েছে। আপনি সেগুলিকে পরে আপনার কোডের যেকোনো স্থানে ব্যবহার করতে পারবেন, যেহেতু এগুলি পরিবর্তনযোগ্য।

২. নেস্টেড সিলেক্টর

Sass-এ নেস্টেড সিলেক্টর ব্যবহার করা যায়, যা CSS এর কোডের structure আরও পরিষ্কার এবং পাঠযোগ্য করে তোলে। CSS-এ সিলেক্টরগুলো আলাদা আলাদা সত্ত্বা (block) হিসেবে রাখতে হয়, তবে Sass এ আপনি সিলেক্টরগুলোকে একে অপরের মধ্যে নেস্ট করতে পারেন।

উদাহরণ:

nav {
  background-color: #333;
  
  ul {
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        color: white;
        padding: 10px;
        text-decoration: none;
        
        &:hover {
          background-color: #555;
        }
      }
    }
  }
}

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

৩. Mixin ব্যবহার করা

Mixin হল এক ধরনের ফাংশন, যেগুলি একাধিক বার কোড পুনরায় ব্যবহার করতে দেয়। একাধিক প্রোপার্টি গ্রুপ করতে এবং তারপর সেগুলি অন্যান্য সিলেক্টরে অ্যাপ্লাই করতে mixin ব্যবহার করা হয়।

উদাহরণ:

@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 ডিরেক্টিভ ব্যবহার করে আপনি এক সিলেক্টরের সমস্ত স্টাইল অন্য সিলেক্টরে হেরিট (inherit) করতে পারেন। এটি আপনার কোডকে আরও কমপ্যাক্ট এবং পুনঃব্যবহারযোগ্য করে তোলে।

উদাহরণ:

.error {
  color: red;
  font-weight: bold;
}

.notice {
  @extend .error;
  background-color: yellow;
}

এখানে, .notice সিলেক্টরটি .error সিলেক্টরের সমস্ত প্রোপার্টি হেরিট করছে এবং পাশাপাশি নিজস্ব প্রোপার্টি যোগ করছে।

৫. Sass এর সাথে CSS ফাইল ইম্পোর্ট করা

Sass এ @import ডিরেক্টিভ ব্যবহার করে আপনি একাধিক ফাইলকে একত্রে যুক্ত করতে পারেন। এর মাধ্যমে আপনি স্টাইলশিটকে বিভিন্ন মডিউলে ভাগ করে রাখতে পারেন এবং পরে সেগুলো একত্রিত করতে পারেন।

উদাহরণ:

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

// main.scss
@import 'colors';

body {
  background-color: $primary-color;
  color: $secondary-color;
}

এখানে, _colors.scss ফাইলের ভ্যারিয়েবলস main.scss ফাইলে ইম্পোর্ট করা হয়েছে। আপনি এইভাবে আপনার প্রোজেক্টে কোডকে আরও মডুলার এবং সুসংগত রাখতে পারবেন।

৬. Partials এবং Imports

Sass এ partials ফাইল ব্যবহার করার মাধ্যমে আপনি কোডের বিভিন্ন অংশ আলাদা আলাদা ফাইলে লিখতে পারেন এবং পরে সেগুলোকে @import ডিরেক্টিভ দিয়ে একত্রিত করতে পারেন। এটি কোডের পুনঃব্যবহারযোগ্যতা এবং মেইনটেনেবলিটি বাড়ায়।

উদাহরণ:

// _variables.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

// main.scss
@import 'variables';

body {
  font-family: $font-stack;
  color: $primary-color;
}

এখানে, _variables.scss ফাইলে ভ্যারিয়েবলস সংরক্ষিত আছে, এবং main.scss ফাইলে সেগুলো ইম্পোর্ট করা হয়েছে।

সারাংশ

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