কেন আপনার SASS ল্যাঙ্গুয়েজ শিখা উচিত ?

আস্সালামুআলাইকুম।  আজ  আমি আপনাদের এই পোস্ট এ আলোচনা করবো কেন আপনার SASS ল্যাঙ্গুয়েজ শিখা উচিত।

SASS কি ?

Sass হল একটি প্রিপ্রসেসর স্ক্রিপ্টিং ভাষা যা ক্যাসকেডিং স্টাইল শীট সংক্ষেপে সিএসএস  এ প্রচুর ব্যবহিত হয় । SassScript নিজেই স্ক্রিপ্টিং ভাষা। Sass দুটি সিনট্যাক্স নিয়ে গঠিত।

একটি হলো .sass এবং অন্যটি হলো .scss এক্সটেনশন। এটিকে সি এস এস এর সুপারপাওয়ার ও বলা হয়। কারণ এটি ব্যবহার করে আপনি সিএসএস আরো সুন্দর এবং আরো অনেক ফীচার ব্যবহার করতে পারবেন। নিচে আমি ঐসব ফীচার বা বৈশিষ্ট নিয়ে আলোচনা করলাম।

ভেরিয়েবল

Sass ভেরিয়েবলগুলি সহজ: আপনি একটি নামের জন্য একটি মান নির্ধারণ করবেন যা একটি ডলার চিহ্ন দিয়ে শুরু হয় “$” , এবং তারপর আপনি মানের পরিবর্তে সেই নামটি উল্লেখ করতে পারেন। একটি প্রপার্টির বিপরীতে, যা শুধুমাত্র একটি স্টাইল নিয়মে বা এট-রুলে ঘোষণা করা যেতে পারে, আপনি যেখানে চান সেখানে ভেরিয়েবল ঘোষণা করতে পারেন । একটি ভেরিয়েবল ব্যবহার করতে, এটি একটি নাম ও তার অধীনে মান অন্তর্ভুক্ত করতে হয় । যেমন : $color: white

এই ক্ষেত্রে আপনি কালার ভেরিএবলটি আপনার প্রজেক্ট এর যেইকোনো জায়গায় ব্যবহার করতে পারবেন।

নেস্টিং

নেস্টিং হল বিভিন্ন লজিক স্ট্রাকচারের একত্রীকরণ প্রক্রিয়া। SASS ব্যবহার করে, আমরা একে অপরের মধ্যে অসংখ্য CSS নিয়ম একীভূত করতে পারি। আমরা একাধিক নির্বাচক এর ভিতর অন্য নির্বাচক তৈরি করে  ব্যবহার করতে পারি। এতে আমাদের সিএসএস বুঝতে সুবিধা হয় , এবং পরবর্তীতে আমরা সহজেই তা পরিবর্তন করতে পারি।  যেমন :

#outer{

color: white;

& li{

color: black

}

}

মিক্সিনস

Mixins বেবহৃত হয় ঐসব ক্ষেত্রে যেইখানে আপনি একই রকমের স্টাইল আপনার প্রজেক্ট এর বিভিন্ন জায়গায় বেবহার করবেন । আপনি সাধারণত একটি মিক্সিন কল করবেন যার একটি নাম থাকবে এবং ঐটার ভেতর বলে দিবেন আপনি কি কি স্টাইল চান।  এরপর আপনি ওই নির্দিষ্ট মিক্সিন কে এক্সপোর্ট করবেন এবং যেই জায়গায় বেবহার করতে চান সেই জায়গায় ইম্পোর্ট করবেন।

লুপ 

আশা করি লুপ কি আপনি জানেন।  লুপ সাধারণত ব্যবহার হয় কোনো একটি প্রোগ্রামিং ভাষায় যেইখানে আমরা একই কাজ বারবার করার জন্য লুপ ব্যবহার করি। যদিও কমন সিএসএস  এ আমরা এই অ্যাডভান্স টেকনিক তা ব্যবহার করতে পারিনা , কিন্তু sass আমাদের সেই সুযোগ করে দিয়েছে। আমরা চাইলেই আমাদের নির্দিষ্ট প্রয়োজনে sass এর সাহায্যে সিএসএস এ লুপ ব্যবহার করতে পারি।  যেমন :

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}