দেখুন এবং পাঁচটি দ্রুত ধাপের মাধ্যমে Sass সংকলন করুন

সিএসএস প্রিপ্রসেসর হিসেবে Sass সম্ভবত সবচেয়ে জনপ্রিয়; বছর জুড়ে এটা আমাদের পরিচ্ছন্ন, পুনরায় ব্যবহারযোগ্য, মডিউলার সিএসএস লিখতে সহায়তা করে। এই তড়িৎ টিউটোরিয়ালে, আমি সরাসরি এই ব্যপারটি দেখাবো এবং ব্যাখ্যা করবো কিভাবে কমান্ড লাইন ব্যবহার করে সিএসএস এর মধ্যে Sass সংকলন করা হয়।  

১। Node.js ইন্সটল করুন

কমান্ড লাইনের মাধ্যমে Sass সংকলন করতে হলে, আমাদের সর্ব প্রথম node.js ইন্সটল করতে হবে। অফিশিয়াল ওয়েবসাইট nodejs.org থেকে এটিকে ডাউনলোড করে নিন, প্যাকেজটি খুলুন এবং উইজার্ড টি অনুসরন করুন। 

২। NPM আরম্ভ করুন

NPM হচ্ছে জাভাস্ক্রিপ্টের জন্য Node Package Manager। NPM ইন্সটল প্রক্রিয়াকে এবং থার্ড পার্টি প্যাকেজ আন ইন্সটল প্রক্রিয়াকে সহজ করে তোলে। NPM দিয়ে Sass প্রজেক্ট আরম্ভ করতে, টার্মিনাল এবং CD (change directory) আপনার প্রজেক্ট ফোল্ডারে খুলুন।

সঠিক ফোল্ডারে npm init কমান্ড চালু করুন। আপনাকে প্রজেক্ট সম্পর্কে অনেকগুলো প্রশ্নের উত্তর দিতে হবে, তারপর NPM আপনার ফোল্ডারে একটি package.json ফাইল তৈরি করবে।

৩। Node-Sass ইন্সটল করুন

Node-sass হচ্ছে একটি NPM প্যাকেজ যা CSS এর জন্য Sass সংকলন করে (যার ফলে এটি খুব দ্রুত হয়)। node-sass ইন্সটল করতে নিচের কমান্ডটি আপনার টার্মিনালের ভিতর চালু করুনঃ npm install node-sass

৪। Node-sass কমান্ড লিখুন

Sass সংকলন করতে ছোট ছোট স্ক্রিপ্ট লেখার জন্য সব কিছুই তৈরি। package.json ফাইলটি একটি কোড এডিটরে খুলুন। আপনি এরকমই কিছু একটা দেখতে পাবেনঃ

1

{

2

  "name": "sass-tutorial",

3

  "version": "1.0.0",

4

  "description": "",

5

  "main": "index.js",

6

  "scripts": {

7

    "test": "echo \"Error: no test specified\" && exit 1"

8

  },

9

  "author": "",

10

  "license": "ISC"

11

}

Test কমান্ডের নীচে scripts সেকশনে একটি scss কমান্ড যুক্ত করুন, যেভাবে এটি নীচে দেখাচ্ছেঃ

1

"scripts": {

2

  "test": "echo \"Error: no test specified\" && exit 1",

3

  "scss": "node-sass -watch scss -o css"

4

}

চলুন এই লাইনটির প্রতি শব্দ অনুসরণ করে যাওয়া যাক।

1. node-sass: এটা দিয়ে বুঝানো হয় node-sass প্যাকেজ।
2. -watch: একটি ঐচ্ছিক পতাকা যার মানে “scss/ folder এ সব .scss ফাইলগুলো দেখুন এবং প্রতিবার পরিবর্তনের সাথে সাথে তাঁদেরকে পুনরায় সংকলন করুন”।
3. scss: এটি একটি ফোল্ডারের নাম যেখানে আমরা আমাদের সব .scss ফাইলগুলো রাখি।
4. -o css: আমাদের সংকলিত CSS এর আউটপুট ফোল্ডার।

যখন আমরা এই স্ক্রিপ্টটি চালু করি তখন এটা scss/ folder এর প্রত্যেকটা .scss ফাইলকে দেখতে শুরু করে , এরপর সংকলিত css কে css/ folder এ সেভ করে রাখে। যতবার আমরা .scss ফাইল পরিবর্তন করে থাকি ততবারই এটা ঘটে।

৫। স্ক্রিপ্ট চালু করুন

আমাদের এক লাইনের স্ক্রিপ্টটিকে এক্সিকিউট করতে, নীচের কমান্ডটি টার্মিনালে চালু করতে হবেঃ npm run scss

এবং কি মজা! আমরা দেখছি এবং Sass সংকলন করছি।

Sass তড়িৎ টিপস

Sass সম্পর্কে আরও জানতে আমাদের সঙ্গেই থাকুন, এখানে একটি সম্পূর্ণ কালেকশন তৈরি হওয়ার পথে!