Sass, CSS preprocessor

Sass। একটি CSS extension language।

আমরা অধিকাংশ web developer CSS এর সাথে পরিচিত। এটি একটি HTML web page কে style করতে অর্থাৎ beautify করতে সাহায্য করে। এই CSS দিয়ে অনেক কিছুই করা যায়। কিন্তু এই CSS Language এর সাথে আরো কয়েকটি super power অর্থাৎ super feature জুড়ে দিলে তা হয়ে যাবে একটা CSS preprocessor। বর্তমানে CSS এর অনেকগুলো preprocessor ই available আছে, কিন্তু তাদের মধ্যে সবচেয়ে জনপ্রিয় হলো Sass বা SCSS। Sass বা যেকোনো preprocessor এর অন্যতম বৈশিষ্ট্য হলো এগুলোতে pure CSS লেখা যায়। কিন্তু এদের অন্যতম একটি সমস্যা হলো এগুলো Browser বুঝতে পারে না। তাই নানা extension এর মাধ্যমে Sass এর মত preprocessor গুলো HTML document এর সাথে run করানো হয়।

এখন দেখা যাক কেন Sass এত জনপ্রিয়।

প্রথম কথা হলো Sass সাধারন CSS এর থেকে অনেক Feature ধারন করে যা অন্য কোনো preprocessor এর ক্ষেত্রে দেখা যায় না।

এখন জানা যাক কি সেই Feature গুলি যা Sass কে এত popular করে।

১. Variables

Sass এ অন্যান্য Programming Language এর মত Variable use করা যায়। হ্যাঁ এটা সত্যি যে CSS এও এখন Variable আছে। কিন্তু Sass এ CSS এর আগে থেকে Variable ছিল। তার চেয়ে বড় কথা এদের syntax এর পার্থক্য।

:root {
  --prio_color: #1e90ff;
}

.box{
  background: var(--prio_color);
}

$prio_color: #1e90ff;

.box{
  background: $prio_color;
}

First box এ দেখানো হয়েছে কিভাবে CSS এ Variable Declare করতে হয়। Second box এ দেখানো হয়েছে কিভাবে Sass এ Variable Declare করতে হয়। CSS এর Variable Declare এর ক্ষেত্রে দেখা যায় বিষয়টা বেশ complicated। অন্যদিকে Sass এর Variable Declaration অনেকটা Php এর মতো। আর বেশি প্যারাও নেতে হয় না। Just dollar ($) sign দিয়ে Variable Name এবং Value দিয়ে দিলে Variable টি declare হয়ে যায়।

আবার CSS এর Variable 90% Browser এ support করে। যেখানে Sass Variable সকল Browser এই support করে

তাই CSS এর থেকে Sass এ Variable বেশি ভালো বলে আমি মনে করি

২. Nesting

Sass এ আমরা অন্যান্য Programming Language এর মতো Nesting করতে পারি। Nesting জিনিসটা হলো একটি code block এর মধ্যে আরো একটি বা একের অধিক code block লেখা। যেমনঃ-

.box {
//First Code Block
 color: red;
   .section_1 {
     //Second Code Block
     background: green;
     color: white;
   }
 }

এই পদ্ধতির মাধ্যমে code আরো বেশি organized থাকে। যা CSS এ লিখলে এরকম হবে :-

.box {
//First Code Block
 color: red;
 }
.box > .section_1 {
 //Second Code Block
 background: green;
 color: white;
   }

সুতরাং code well-maintainable রাখার জন্য Sass এর Nesting ভূমিকা রাখতে পারে

৩. Module

Sass এ আমরা Python এর মত module use করতে পারি। অর্থাৎ একটি নিদির্ষ্ট code আমরা অনেক গুল file এ ভাগ করতে পারি। যা আমাদের code কে ভবিষ্যতে ভালোভাবে manage করতে সাহায্য করবে।

//File1
import "File2";

.box{
  background: $prio_color;
}

//File2

$prio_color: #1e90ff;

//এই Variable টি File1 এ import এর মাধ্যমে pass করা হয়েছে

এটাও মূলত code কে গুছিয়ে রাখতে ভূমিকা পালন করবে

৪. Mixin

Mixin মূলত অন্যান্য programming language এর function এর মত কাজ করে। অর্থাৎ একটি নিদির্ষ্ট code আমরা অনেক গুল part এ ভাগ করতে পারি। আর প্রতিটি part হবে reusable অর্থাৎ আমরা তা অনেকগুলো কাজে ব্যাবহার করতে পারব। যেমন :-

@mixin prio_color_add_koro ($color) {
  background: $color;
}

.box {
 @include prio_color_add_koro (#1e90ff);
}

.box2 {
 @include prio_color_add_koro (#1e90ff);
}

.box3 {
 @include prio_color_add_koro (#1e90ff);
}
//এভাবে হাজারো element এ আপনি mixin use করতে পারবেন

এটাও code কে organized রাখতে সাহায্য করবে

Conclusion

উপরের feature গুলো ছাড়া Sass এর আরো অনেক feature আছে যা Sass কে অন্যান্য CSS preprocessor থেকে unique করেছে। তাছাড়া Sass এ Logical কাজ ও করা যায়।

আপনি Sass শিখতে চাইলে ঘুরে আসতে পারেন Sass এর official web site । তাছাড়া অনেকগুলো youtube channel এও Sass এর video আছে। আমার মনে হয় CSS কে আরো সহজ ভাবে ব্যবহার করতে Sass শেখা উচিত।

ধন্যবাদ।