Sass ফাইল তৈরি এবং CSS এ কম্পাইল করা

Sass কি?

Sass (Syntactically Awesome Stylesheets) একটি প্রি-প্রসেসর যা CSS (Cascading Style Sheets) এর উন্নত সংস্করণ। এটি CSS এর জন্য শক্তিশালী ফিচার সরবরাহ করে, যেমন variables, nested rules, mixins, partials, এবং imports। Sass কোড আরও সংক্ষিপ্ত, কার্যকরী এবং রক্ষণাবেক্ষণযোগ্য হতে সাহায্য করে।

Sass আপনাকে CSS লিখতে আরও ক্ষমতাশালী এবং কার্যকরী উপায়ে সাহায্য করে। Sass একটি প্রি-প্রসেসর, অর্থাৎ আপনাকে Sass ফাইল লিখে সেগুলিকে CSS ফাইলে কম্পাইল করতে হয় যাতে ব্রাউজার তা পড়ে এবং স্টাইল প্রয়োগ করতে পারে।

Sass ফাইল তৈরি করা

Sass ফাইল তৈরি করতে, প্রথমে আপনাকে .scss বা .sass এক্সটেনশনের একটি ফাইল তৈরি করতে হবে। .scss হলো Sass এর একটি সিনট্যাক্স যা CSS এর মতোই কনভেনশন অনুসরণ করে, যেখানে ; এবং {} ব্যবহার করা হয়। .sass একটি বেশি কমপ্যাক্ট সিনট্যাক্স যা CSS এর মতো সেমিকোলন এবং ব্রেসেস ছাড়াই কাজ করে।

উদাহরণ ১: SCSS ফাইল তৈরি করা

styles.scss

$primary-color: #3498db;

body {
  background-color: $primary-color;
  font-family: Arial, sans-serif;
}

h1 {
  color: white;
  font-size: 2em;
}

এখানে, $primary-color একটি variable যা পুরো স্টাইলশিটে পুনঃব্যবহারযোগ্য। এখানে আমরা SCSS সিনট্যাক্স ব্যবহার করেছি।

Sass ফাইলকে CSS এ কম্পাইল করা

Sass ফাইল তৈরি করার পর, আপনাকে সেই ফাইলটি CSS ফাইলে কম্পাইল করতে হবে যাতে ব্রাউজার তা পড়তে পারে। Sass ফাইল কম্পাইল করতে আপনাকে Node.js, npm, এবং Sass ইনস্টল করতে হবে।

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

প্রথমে, আপনার সিস্টেমে Node.js এবং npm ইনস্টল করা থাকতে হবে। তারপর আপনাকে Sass ইনস্টল করতে হবে। এটি ইনস্টল করতে নীচের কমান্ডটি ব্যবহার করুন:

npm install -g sass

এটি Sass কে গ্লোবালি ইনস্টল করবে, যার ফলে আপনি যে কোনো জায়গা থেকে কম্পাইল করতে পারবেন।

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

Sass ফাইল কম্পাইল করার জন্য, আপনি নীচের কমান্ডটি ব্যবহার করতে পারেন:

sass styles.scss styles.css

এই কমান্ডটি styles.scss ফাইলটিকে styles.css ফাইলে কম্পাইল করবে।

৩. কম্পাইল অপশন

Sass এর আরও কিছু কম্পাইল অপশন রয়েছে যা ব্যবহার করে আপনি কাজের ধারাকে সহজ করতে পারেন:

• ওয়াচ মোড: আপনি যদি একটি ফাইলের পরিবর্তন সাপেক্ষে অটোমেটিক্যালি কম্পাইল করতে চান, তবে --watch ফ্ল্যাগ ব্যবহার করতে পারেন:

  sass --watch styles.scss:styles.css
  

  এতে, styles.scss ফাইলটি পরিবর্তিত হলেই তা স্বয়ংক্রিয়ভাবে styles.css ফাইলে কম্পাইল হয়ে যাবে।

• কম্পাইল ডিরেক্টরি: আপনি যদি একটি ডিরেক্টরি কম্পাইল করতে চান, তবে নীচের মতো কমান্ড ব্যবহার করতে পারেন:

  sass --watch scss/:css/
  

  এতে, scss ডিরেক্টরির সমস্ত .scss ফাইলকে css ডিরেক্টরিতে .css ফাইলে কম্পাইল করা হবে।

Sass এর অন্যান্য ফিচার

1. Variables (ভেরিয়েবল): Sass এ আপনি CSS বৈশিষ্ট্যগুলির মান সংরক্ষণ করতে পারার জন্য ভেরিয়েবল ব্যবহার করতে পারেন।

   $primary-color: #3498db;
   $font-stack: Helvetica, sans-serif;
   

2. Nesting (নেস্টিং): CSS এর নিয়মগুলোকে আরও সংগঠিতভাবে লিখতে নেস্টিং করা যায়।

   .container {
     width: 100%;
     padding: 20px;
   
     .header {
       background-color: $primary-color;
       color: white;
     }
   }
   

3. Mixins (মিক্সিন): আপনি CSS রুলের পুনঃব্যবহারযোগ্য ব্লক তৈরি করতে মিক্সিন ব্যবহার করতে পারেন।

   @mixin border-radius($radius) {
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
     border-radius: $radius;
   }
   
   .box { 
     @include border-radius(10px); 
   }
   

4. Inheritance (ইনহেরিটেন্স): CSS ক্লাসের মধ্যে ইনহেরিটেন্স সৃষ্টি করা যায়, যা কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি করে।

   .button {
     padding: 10px 15px;
     border-radius: 5px;
   }
   
   .primary-button {
     @extend .button;
     background-color: $primary-color;
   }
   

সারাংশ

Sass হল CSS এর একটি প্রি-প্রসেসর যা উন্নত ফিচার যেমন ভেরিয়েবল, মিক্সিন, নেস্টিং এবং ইনহেরিটেন্স সরবরাহ করে। Sass ফাইল তৈরি করা এবং CSS এ কম্পাইল করা খুবই সহজ। Node.js এবং Sass ইনস্টল করে আপনি Sass ফাইল তৈরি করতে পারবেন এবং সেগুলিকে CSS ফাইলে কম্পাইল করতে পারবেন। --watch অপশন ব্যবহার করে আপনি ফাইল পরিবর্তন হবার সাথে সাথে কম্পাইল করতে পারেন, যা ডেভেলপমেন্টের সময় অনেক সুবিধাজনক।