Advertisement
  1. Web Design
  2. Sass
Webdesign

কুইক টিপঃ স্যাস ভেরিয়েবল সঠিকভাবে নামকরণ করা

by
Length:ShortLanguages:

Bengali (বাংলা) translation by Arnab Wahid (you can also view the original English article)

সিএসএস প্রিপ্রসেসর ব্যবহার করলে, যেমন লেস বা স্যাস, সেখানে ভেরিয়েবল ব্যবহারের সুযোগ থাকে। তবে, ভ্যারিয়েবলের নাম র‍্যান্ডমভাবে না না দিয়ে, গঠনমুলক ভাবে দেয়া সম্ভব। ১ ভেরিয়েবল নেম গুলো অর্গানাইজ করে দেয়া যায় ( প্রজেক্ট অনুসারে )। এতে প্রজেক্টে স্ট্রাকচার আসবে, বুঝতে সুবিধা হবে।


নামের সাজেশন

ধরেন প্রজেক্টের টেক্সট কালার ঠিক করতে একটি ভ্যারিয়েবল তৈরি করা হল। আপনি নাম দিলেন $text-color, কিন্তু আসলে $color-text নামকরণ করলে ভালো হত না? কিভাবে ডিসাইড করবেন? ভেবে নাম না রাখলে পরে প্রজেক্টের স্ট্রাকচারের ক্ষতি হয়। অনেক সময় আমরা ভুলেই যাই কোন প্রজেক্টে কি নিয়ম মেনে ভ্যারিয়েবলের নাম রাখা হয়েছিল। এতে পরে অনেক কনফিউশন ক্রিয়েট হয়।

এর জন্য আমাদের নামকরণের কিছু নিয়ম ঠিক করা দরকার। ভ্যারিয়েবলের নাম গ্রুপে গ্রুপে, একটার সাথে আরেকটার রিলেশন মিল রেখে করা উচিৎ। কাজ বুঝে সেই অনুপাতে গ্রুপ করা যায়, বা ইলিমেন্ট বুঝে। (বাম থেকে ডানে - ইত্যাদি)।

যদি চারটা ভ্যারিয়েবল চার ভিন্ন রকম বর্ডার কালার এর জন্য হয়, তবে প্রতিটার নাম বর্ডার দিয়ে শুরু হওয়া উচিৎ। এতে পরে পড়ে বুঝতে সুবিধা হবে। গ্রুপিং করে রাখলে নাম, পরে পড়ে বুঝতে সুবিধা হয়।

var-variable-names

জেনেরিক নামের পরিবর্তে স্পেসিফিক নাম

ধরি স্যাসে কালার প্যালেট ঠিক করতে কিছু ভ্যারিয়েবল সেট করেছেন। ব্রুল এর শেড দিয়ে প্যালেট হলে, ভ্যারিয়েবলের নাম এমন হতে পারেঃ

জেনেরিক ভাবে শুরু হলেও , এখন প্রতি নাম ব্লু দিয়ে শুরু হচ্ছে। আরও স্কেসিফিকভাবে নাম রাখা যায়।

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


হিন্টিং এর উদাহরণ

বড় প্রজেক্টে কাজ করার জন্য কালারের ভ্যারিয়েবল এমন গ্রুপে গ্রুপ ভাগ করে নিলে অনেক সুবিধা।

ধরেন, বর্ডার কালার ঠিক করতে একটি ভ্যারিয়েবল দরকার। border: 1px solid $colo টাইপ করা শুরু করলেই, এডিটর আগে থকে ডিফাইন করা ভ্যারিয়েবল সাজেস্ট করবে।

var-color-

হয়ত প্রজেক্টে অনেক কালার আছে, কিন্তু আমার বর্ডার কালারটাই দরকার। আমি আগে থেকেই আমার বর্ডারের কালার প্রিডিফাইন করে রাখতে পারি। এভাবেঃ পরে কোড করার সময় জাস্ট border: 1px solid $color-border লিখে দিলেই হল। যেটা ব্যবহার করতে চাই, সেটা সাজেশন থেকে সিলেক্ট করে নিলেই হল!

var-color-border

কোদ হিন্টিং না চাইলেও, এই উপায়ে নামকরণ করা ইফেক্টিভ। ভ্যারিয়েবল একটার সাথে আরেকটার রিলেশন সহজেই একটা নামের প্রিফিক্স দিয়ে ঠিক করে দেয়া যায়।


পরিশেষ

এই পদ্ধতিতে নামরকরন করলে, কোড পরবর্তীতে পড়ে বুঝতে অনেক সুবিধা হয়। সবার জন্যই এটা ভালো সমাধান!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.