সিনট্যাক্টিক্যালি অসাধারণ স্টাইল শীট (Sass) হল একটি জনপ্রিয় CSS এক্সটেনশন ভাষা। ভাষাটি প্রায় 15 বছর ধরে বিদ্যমান। এটি বুটস্ট্র্যাপ থেকে ফাউন্ডেশন পর্যন্ত প্রতিটি সিএসএস লাইব্রেরি এবং ফ্রেমওয়ার্কের সাথে সামঞ্জস্যপূর্ণ করে CSS এর প্রতিটি সংস্করণের সাথে ভাল কাজ করে।

ভাষা আপনাকে Sass কোড লিখতে এবং তারপর সেই কোডটি CSS-এ কম্পাইল করতে দেয়। প্লেইন CSS এর পরিবর্তে Sass ব্যবহার করার মান হল এটি অতিরিক্ত বৈশিষ্ট্য প্রদান করে যা বর্তমানে CSS এর সুযোগের বাইরে।

এই টিউটোরিয়ালে, আপনি Sass এবং এর সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন তা শিখবেন।

Sass ইনস্টল করুন

আপনার ডিভাইসে Sass ব্যবহার করার বিভিন্ন উপায় আছে। এর মধ্যে রয়েছে একটি অ্যাপ্লিকেশন চালানো (যেমন LiveReload বা scout-app), GitHub থেকে Sass ডাউনলোড করা বা npm ব্যবহার করে এটি ইনস্টল করা।

npm সঙ্গে sass ইনস্টল করুন

npm ব্যবহার করে Sass ইনস্টল করতে আপনার ডিভাইসে NodeJS এবং npm ইনস্টল থাকতে হবে। তারপর আপনাকে একটি package.json ফাইল তৈরি করতে হবে (যেটি আপনার প্রকল্পে যেকোনো npm প্যাকেজ ইনস্টল করার সময় একটি ভাল অনুশীলন)। আপনি নিম্নলিখিত টার্মিনাল কমান্ড দিয়ে আপনার প্রকল্প ডিরেক্টরিতে একটি মৌলিক package.json ফাইল তৈরি করতে পারেন।

package.json ফাইলটি গুরুত্বপূর্ণ কারণ এটি আপনার প্রজেক্টের কনফিগারেশন হিসেবে কাজ করে। প্রতিবার যখন আপনি একটি নতুন npm প্যাকেজ ইনস্টল করবেন package.json ফাইলটি এটি প্রতিফলিত করবে।

এই কমান্ডটি একটি নতুন নির্ভরতা ক্ষেত্র তৈরি করে package.json ফাইল আপডেট করবে, যাতে নতুন Sass প্যাকেজ থাকবে। এটি একটি নতুন package-lock.json ফাইল তৈরি করবে এবং একটি node_modules ডিরেক্টরিতে sass (প্লাস নির্ভরতা) ইনস্টল করবে।

বিভিন্ন ধরনের Sass ফাইল

একটি Sass ফাইলে দুটি এক্সটেনশনের একটি থাকতে পারে, .sass বা .scss। তাদের মধ্যে প্রধান পার্থক্য হল .scss ফাইলটি কোঁকড়া ধনুর্বন্ধনী এবং সেমিকোলন (যেমন CSS) ব্যবহার করে, যেখানে .sass ফাইলটি ইন্ডেন্টেশন ব্যবহার করে CSS গঠন করে (অনেকটা পাইথনের মতো)। কিছু ডেভেলপার .scss ফাইল ব্যবহার করতে পছন্দ করে কারণ এর গঠন CSS এর কাছাকাছি।

এই কনফিগারেশন –watch বিকল্প ব্যবহার করে। এটি sass চলমান রাখে এবং নিশ্চিত করে যে এটি যখনই পরিবর্তন হয় তখনই সেই ফাইলগুলি পুনরায় কম্পাইল করে। প্রতিটি ফাইলের জন্য, sass একটি .css এবং একটি .css.map ফাইল তৈরি করবে।

উপরের Sass স্ক্রিপ্টটি কার্যকর করতে আপনাকে আপনার টার্মিনালে নিম্নলিখিত কমান্ডটি চালাতে হবে।

sass ভেরিয়েবল

আপনি আজ CSS-এ ভেরিয়েবল তৈরি করতে পারেন, কিন্তু 15 বছর আগে CSS ভেরিয়েবলের অস্তিত্ব ছিল না, তাই তাদের জন্য Sass সমর্থন ছিল মূল্যবান। Sass ভেরিয়েবল CSS ভেরিয়েবলের মতই কাজ করে। আপনি একটি CSS ফাইলে ব্যবহার করতে চান এমন মানগুলি (যেমন রঙ) তারা সংরক্ষণ করে। ভেরিয়েবলের একটি প্রধান সুবিধা হল যে তারা আপনাকে একটি মানকে শুধুমাত্র একটি জায়গায় পরিবর্তন করে একাধিক ঘটনার সাথে আপডেট করার অনুমতি দেয়।

প্রতিটি Sass ভেরিয়েবল একটি ডলার চিহ্ন দিয়ে শুরু হয়, তারপরে অক্ষরের যেকোনো সংমিশ্রণ হয়। আপনার ভেরিয়েবলগুলিকে বর্ণনামূলক করার চেষ্টা করুন, যেমন উপরের $primary-color উদাহরণে। এটি লক্ষ্য করা গুরুত্বপূর্ণ যে একটি Sass ভেরিয়েবল একটি CSS ভেরিয়েবলে কম্পাইল করে না।

আপনি উপরের ফাইল থেকে দেখতে পাচ্ছেন কোন CSS ভেরিয়েবল নেই। ভেরিয়েবলের সুবিধা হল Sass ফাইলে করা যেকোনো পরিবর্তন সংশ্লিষ্ট CSS ফাইল আপডেট করবে।

sass mixins

আপনার যদি এমন একটি সম্পত্তি থাকে যা আপনি আপনার প্রকল্প জুড়ে একাধিকবার ব্যবহার করতে চান তবে একটি পরিবর্তনশীল দুর্দান্ত। কিন্তু আপনার যদি একগুচ্ছ বৈশিষ্ট্য থাকে যা আপনি একটি একক সত্তা হিসাবে ব্যবহার করতে চান তবে একটি মিক্সিন কাজ করবে।

প্রতিটি মিক্সিন @মিক্সিন কীওয়ার্ড দিয়ে শুরু হয়, তারপরে আপনি যে নামটি মিক্সিনকে বরাদ্দ করতে চান তা দিয়ে। আপনার কাছে ভেরিয়েবলগুলিকে মিক্সিনে পরামিতি হিসাবে পাস করার এবং একটি ফাংশনের মতোই মিক্সিনের শরীরের মধ্যে সেই ভেরিয়েবলগুলি ব্যবহার করার বিকল্প রয়েছে।

sass ফাংশন

বিভিন্ন কীওয়ার্ড ছাড়াও, ফাংশন এবং মিক্সিনের মধ্যে প্রধান পার্থক্য হল যে ফাংশনটি অবশ্যই কিছু রিটার্ন করবে। আপনি Sass ফাংশন ব্যবহার করতে পারেন গণনা করতে বা মানগুলির উপর ক্রিয়াকলাপ সম্পাদন করতে।