[ভিডিও টিউন] এডভান্স ডিজাইনারদের জন্য – CSS এ ফাংশন যুক্ত করে কোড করুন আরো দ্রুত। SASS – Syntactically Awesome Style Sheets এর পুর্ণাঙ্গ একটি টিউটোরিয়াল

ওয়েব ডিজাইনারদের জন্য সিএসএস অত্যাবশ্যকীয়। যতদিন যাচ্ছে ততই সিএসএস এর ব্যবহার সহজ করার জন্য প্রোগ্রামাররা কাজ করে চলেছেন। এই তো মাত্র 5 বছর আগেও যেখানে একটি ডিজাইন করতে 5 দিন লাগতো, আজ সিএসএস ৩ দিয়ে সেটা মাত্র 1 ঘন্টায় করা সম্ভব হচ্ছে। কারণ আগে যে ডিজাইনগুলোতে সিএসএস এর পাশাপাশি জাভাস্ক্রিপ্ট, ইমেজ ইত্যাদির মাধ্যমে ফুটিয়ে তুলতে হত, জাভাস্ক্রিপ্ট এবং ইমেজ ছাড়া শুধুমাত্র সিএসএস-৩ দিয়েই সিম্পল কিছু কোডিং এর মাধ্যমেই অনেক ইন্টারএকটিভ এবং চোখ-ধাধানো ডিজাইন করা সম্ভব হচ্ছে। সিএসএস এবং এইচটিএমএল এর আরো দ্রুত এবং সহজে কোড করার জন্য আমরা জেন-কোডিং কিংবা ইমেট ব্যবহার করে থাকি। কিন্তু সিএসএস এ আমরা সাধারণত কোন প্রোগ্রামিং কোড কিংবা ফাংশন ব্যবহার করতে পারি না। যেমন আমি যদি চাই বডির ফন্ট-সাইজ যদি ২০ পিক্সেল এর কম হয়, তবে এর সাথে ৩০ পিক্স একটা লাইন হেইট যুক্ত হবে। এ ধরণের কোন শর্ত আমরা সিএসএস এ ব্যবহার করতে পারি না। অথবা কোন একটি কালারকে কিংবা পুর্ণাঙ্গ একটা স্টাইলকে আমরা বার বার ব্যবহার করতে চাইলে সেটা কোন ভারিয়্যাবলের মাধ্যমে সংরক্ষণ করা যায় না।

 

আজ আমরা উপরে আলোচ্য সিমাবদ্ধটা টাই দেখবো কিভাবে আমরা সিএসএস এ সেটা করতে পারি। অর্থাৎ আমি সাস (SASS - Syntactically Awesome Style Sheets) এর কথা বলছি। উপরোক্ত কাজটি আমরা সাস অথবা লেস সিএসএস এর মাধ্যমে করতে পারি। এর আগে সাস (SASS) এবং লেস সিএসএস সর্ম্পকে টেকটিউন্সে আরিফুল ইসলাম শা্ওন ভাই, উনার এই টিউনে ধারণা দিয়েছেন। তবে বাংলায় সাস (SASS) নিয়ে কোন টিউটোরিয়াল নেই।

ইনফোনেট সাস এর উপর পুর্ণাঙ্গ একটি টিউটোরিয়াল বের করেছে।

SASS এর উপর পুর্ণাঙ্গ একটি টিউটোরিয়াল

একটি এইচটিএমএল-৫ এবং সিএসএস-৩ তে কিভাবে সাস ব্যবহার করে দ্রুত কোড করা যায়, তা দেখানো হয়েছে।

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

সৌজন্যে : ইনফোনেট 

টিউনারঃ Unknown

আপনার জন্য আরও ভয়েস

Ads by Tech Voice