"আমার কনসোল ভালো লাগেনা। আমি রুবি জানিনা, আমার স্যাস দরকার নেই। কেন শিখবো?" এতকথা না বলে আসে শুনুন কি বলি...

১। এটা অনেক সহজ!

আপনি আগে থেকেই স্যাস জানেন! হ্যা, আসলেই জানেন।

স্যাসেস আর সিএসএসের সিনট্যাক্স সেইম। কাকতালীয় ঘটনা কি? না। স্যাস আপনাদের মত ডিজাইনারদের জন্যই বানানো হয়েছে, যেন এটা সবাই সহজে শিখতে পারে। যদি তারা শিখতে চায়।

টার্মিনাল লাগবে না

প্রথমে যখন স্যাস শিখতে নিয়েছিলাম, "টার্মিনাল" শুনেই বলেছি, শিখব না। এমন না যে টার্মিনাম ভয় পাই, আমি এটা অনেক কাজে ব্যবহার করি ( যখন ব্যবহার করা ছাড়া উপায় থাকেনা ) অনেক বছর ধরে, কিন্তু আমি ইন্টারফেস ব্যবহার করতে পছন্দ করি। UI না থাকলে ব্যবহার করব না, এই যা।

তবে? আমি কিছু অপশন খুঁজে পেয়েছি।

• স্কাউট অ্যাপ (উইন্ডোজ, ম্যাক) ফ্রি
• কম্পাস অ্যাপ ( উইন্ডোজ, ম্যাক, লিনাক্স ) ১০ডলার
• ফায়ার অ্যাপ ( উইন্ডোজ, ম্যাক, লিনাক্স ) ১৪ ডলার
• কোডকিট ( শুধু ম্যাকের জন্য ) ২৫ ডলার
• লাইভ রিলোড ( শুধু ম্যাকের জন্য ) ৯.৯৯ ডলার ( একটা বেটা উইন্ডোজ ভার্শনও আছে )

আমি কোডকিট সেই বেটা টেস্টিং আমল থেকে ব্যবহার করি। আমি এটা দিয়ে স্যস ব্যবহার করি, আর টার্মিনাল একেবারেই এড়িয়ে চলি।

প্রেশার নেই

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

আপনি যদি জীবণে কোনদিন একটা স্যাস ফাংশন বা মিক্সিনো না লেখেন, এগুলা ব্যবহার ঠিকই করতে হবে, কারণ আপনি অনেক ফ্রেমওয়ার্ক আর ফাংশন খুঁজে পাবেন, যেগুলো বুঝতে সমস্যা হবে, তাই আগে থেকে শিখে রাখাই ভালো।

@import

আপনার নেক্সট প্রজেক্টে নিশ্চই normalize.css ব্যবহার করবেন। কিভাবে করবেন? সরাসরি হেডে লিংক করে দিবেন? বা @import ব্যবহার করে সিএসএস ফাইলে অ্যাড করে দিবেন? এইভাবে করলে, এক্সট্রা HTTP রিকোয়েস্ট তৈরি হচ্ছে; যদিও তেমন কিছু না, কিন্তু এটা বেষ্ট প্র্যাক্টিস নয়।

আবার নরমালাইজ সরাসরি সিএসএস ফাইলে কপি করে ঢুকিয়ে দিলেও সমস্যা, কোড হিজিবিজি লেগে যায়। এত ঝামেলা প্রজেক্ট শুরু করার আগেই! আর normalize.css আপডেট করতে হলে? আবার কপি পেস্ট?

স্যাসে @import স্টেটমেন্ট ব্যবহার করে নরমালাইজ একটা সিএসএস ফাইলে তৈরি করে নেয়া যায়। (অনেক সহজেই করা হয়ে যায়।)।

২। সিএসএস ওয়েট

DRY (Don't Repeat Yourself) নিয়ম আসল প্রোগ্রামিং ভাষায় ব্যবহার করা হয়। কিন্তু সিএসএস এ হয় না। আর এই জন্যই তো সিএসএস ইনভেন্ট হয়েছিল। তাই না? বার বার একেক ক্লাস সেট করতে। এভাবেই স্টাইলিং হয়।

কিন্তু, এটা আরো ভালো উপায়ে করার সুযোগ রয়েছে। যেটা আমাদের একটা ট্রাই করা উচিৎ।

উদাহরণস্বরূপ, নরমালাইজ এর সেট করা ফন্ট সাইটে আমরা সররাচর ব্যবহার করি না। এর নিচে আরেকটা ফন্ট সেট করি। তাই না? একই জিনিষ বার বার ডিফাইন করা হয়।

দেখা যায় ঘুরে ফিরে @import ই ব্যবহার করা হচ্ছে

এর পর কয়েকবার ডিফাইন করা ক্লাসের ডিজাইজন মন মত না আসলে আমরা সেটা আবার ডিফাইন করে !important স্টেটমেন্ট বসিয়ে দেই!

normalize.css এখনও স্যাসে লেখা হয়নি, কিন্তু কিছু মানুষ তা স্যাসে কনভার্ট করে নিয়েছেম, আপনি সেটা ব্যবহার করতে পারেন। জেমনঃ

$font-family: "Comic Sans";

আপনার এখনই Normalize 2.0.1+ ব্যবহার শুরু করা উচিৎ। এটা সুবিধাজনক চয়েস।

৩। এগিয়ে থাকা!

সিএসএস একটা ইভলভিং ল্যাংগুয়েজ । সিএসএস স্পেসিফিকেশন চেক করে দেখুন, প্রমান পেয়ে যাবেন।

:root {
  var-header-color: #06c;
}

h1 { background-color: var(header-color); }

এটা অনেক সমস্যাজনক!

যেহেতু এটা একটা পরিবর্তনশীল ভাষা, তাই প্রি প্রসেসর ব্যবহার না করে অনেকখানি এগুলেও পরে গিয়ে সেটা লাগেই। প্রিপ্রসেসর ব্যবহার করে এই ভাষার জটিলটা কমিয়ে আনা যায়!

শুধু ভ্যারিয়েবল নয়! স্যাস বা অন্য প্রিপ্রসেসর দিয়ে ভবিষ্যৎ এর সিএসএস এর জন্য তৈরি হয়ে নেয়া যায়। এখানে আরেকটা স্পেসিফিকেশন দেয়া হল, এটায় সিএসএস নেস্টিং দেখানো হয়েছে, যেটা দেখতে অনেকটা এমনঃ

/*The following example using Hierarchies:*/

div, p {
  & .keyword {color: green;} 
	font-size: 10px;
	& .constant {
		color: red;
		&:hover:after { content: " [" attr(value) "]";}
		background-color: green;
	}
}
/*...produces the same results as the following CSS:*/

div, p {font-size: 10px;}
div .keyword, p .keyword {color: green;}
div .constant, p .constant {color: red; background-color: green;}
div .constant:hover:after, p .constant:hover:after {content: " [" attr(value) "]";}

স্পেসিফিকেশনে কোন কোন কম্পাইল হয়না, এটাবেই ভবিষ্যতে সিএসএস ব্যবহার হবে!

ভবিষ্যৎ প্রভাবিত করা

সিএসএস আপনার আমার মত সাধারণ মানুষেরই তৈরি করা। তারাই স্পেসিফিকেশন কি হবে ঠিক করেন। স্যাসের মত প্রিপ্রসেসর ব্যবহারে পার্টিসিপেট করে, প্রযুক্তিতে এগিয়ে নেয়া যায়।

আপনার মাথায় কোন ফিচার রিকোয়েস্ট আসলে সেটা আপনি জানাতে পারেন, বা অন্যান্যদের সাথে ডিসকাশনে অংশগ্রহণ করতে পারেন।

৪। কমিউনিটি থাকার বেনিফিট

স্যাসের কমিউনিটি আপনার অনেক কাজে সাহায্য করবে। এতে কাজে সুবিধা পাবেন।

ZURB এর একটা অনেক বড় ফ্রেমওয়ার্ক হচ্ছে ফাউন্ডেশন, স্যাসের জন্য।

আরেকটি লাইট ওয়েট বিকল্প হচ্ছে Inuit.css।

তারপর আছে কম্পাস, এটা ফ্রেমওয়ার্কের উপর আরো অন্যান্য অপশন দেয়।

এরপর আরও আছে বার্বন।

Rem বা ফলব্যাকের মত অ্যাডভান্স কোন ফিচার ব্যবহার করতে চাইলে? পুরোনো ব্রাউজারে সেটা কিভাবে করবেন? ফন্ট সাইজ রেম ও পিক্সেলে দুইবার সেট করতে পারেন, যেন ব্রাউজার বুঝে যে কোন একটা ব্যবহার হতে পারে।

h1 {
font-size: 16px;
font-size: 1rem;
}

মানে রেম ব্যবহারে দুইবারই ভ্যালু সেট করতে হবে। কিছু আরেকটু জটিল হিসাবের সময় হাতে লিখে মান বসিয়ে সুবিধা করা যায়না। 16px = 1rem সহজ, কিন্তু 19px এর রেম কি হবে?

যেহেতু স্যাসের কমিউনিটি অনেক বড় ও স্ট্রং,, তাদের গিটহাব থেকে আপনি গিটহাব থেকে _rem.scss ডাউনলোড করে ব্যবহার করতে পারেন। এটা দিয়ে আপনিঃ

h1 {
  @include rem(font-size, 2rem)
}

স্যাস অটোম্যাটিক কনভার্ত করে নিচের

h1 {
  font-size: 36px;
  font-size: 2rem;
}

করে ফেলবে। এতে ড্রপ ও ফলব্যাক সাপোর্ট আছে। আপনার Regexসার্চ করতে হবে না, প্রতি মান একাধিকবার সেট করতে হবেনা।

$print-rem-px-fallbacks: false;

এখন নিশ্চই বুঝতে পারছেণ "print rem px fallbacks" ভ্যালু দিয়ে কি হয়! :)

অনেক কিছুই ডিস্কাস করলাম। এগুলা কি খুব কঠিন ছিলো?

৫। শর্টকাট

লিংক কালার ডিফাইন করা একটি বিরক্তিকর কাজ। জানেন তোঃ

a {
  color: blue; 
}
a:hover {
  color: yellow; 
}

এটা একটা রিপিটেটিভ টাস্ক। তার বদলে না হয় কম্পাস ব্যবহার করুন?

a{
 @include link-colors(blue, yellow);   
}

এটা স্যাস কম্পাইল করে নিজে থেকে কালার ভ্যালু সেট করে নিবে। আপনি একবার ডিফাইন করলেই প্রতিবার মান পেয়ে যাবে। কম্পাস ডকুমেন্টেশন দেখে আসুন এখানে।

সব ছোট ছোট কাজের ফাইল একসাথে @include দিয়ে কম্পাইল করা নেয়া যায়। (ভয় পাবেন না যেন!)

স্যাসের অনেক অনেক ফিচার আছে। স্যাস ডকুমেন্টেশন দেখতে ভালো না হলেও, এখানে অনেক রকম তথ্য রয়েছে যা উপকারে আসবে আপনার। এখান থেকে স্যাসের ফিচার সম্পর্কে পড়ে জেনে নিন। এখন আর কালার নিয়ে এক্সপেরিমেন্ট করতে ফটোশপ ওপেন করা লাগে না বারবার। আমি জাস্ট এটা করিঃ

a {
  color: lighten(black, 10%);
}

যেটা কম্পাইল হয়ে হয়

a {
  color: #1a1a1a; 
}

পরিশেষ

স্যাস কঠিন কিছু না যেটা শুধু এক্সপার্ট ডেভেলাপাররা ব্যবহার করে। এটা আজকের দিনে সবাই সহজে ব্যবহার করতে পারে।

চাইলে স্যাস সহজ। আবার চাইলে এটা দিয়ে অনেক কঠিন কঠিন কাজও করা যায়। কিভাবে কি করতে হয় গুগল করেই জেনে নিতে পারেন!

তো আজই স্যাস ব্যবহার শুরু করুন। সবার থেকে এগিয়ে আসার জন্য এটা শিখতেই হবে! স্যাস টিউটোরিয়াল দেখুন। আর্টিকেল পড়ুন এবং ব্যবহার শুরু করুন!