LESS এবং SASS স্টাইলশীট কি?

LESS এবং SASS/SCSS হচ্ছে ডাইন্যামিক স্টাইলশীট। আর CSS হচ্ছে স্ট্যাটিক বা ম্যানুয়াল স্টাইলশীট, মানে সকল কোড ব্লক, সিনট্যাক্স আপনাকেই লিখতে হবে। অনেক আগে থেকে CSS এর ব্যবহার হচ্ছে কিন্তু বর্তমানে ওয়েব এর ইন্টেরেক্টিভিটি বাড়াতে এবং অল্প এবং রি-ইউজ্যাবল (পূনরায় ব্যবহার করা যায় এমন) ভ্যারিয়্যাবল এবং মিক্সিন ক্লাস তৈরির মাধ্যমে কোডিং করে অনেক কাজ সম্পন্ন করতে ডাইন্যামিক সিএসএস ইউজ করা হয়। তাই LESS এবং SASS/SCSS -এর আবির্ভাব।

মূলত, আপনি যে ডাইন্যামিক কোড লিখবেন, সেটি কম্পাইল হয়ে ব্রাউজারে আউটপুট দিবে।  LESS এবং SASS/SCSS -কে স্টাইলশীট প্রি-প্রোসেসর বলা হয়।

SASS/SCSS চলাতে আপনার পিসি তে ruby install করা থাকতে হবে এবং LESS চালাতে Less.js লাইব্রেরি, less compiler ইত্যাদি ইন্সটল থাকলে হবে।

 

LESS syntax এক্সাম্পলঃ example of less stylesheet SASS syntax এক্সাম্পলঃ

example of sass stylesheet

স্টাইল ডিক্লেয়ারেশন লিখার ক্ষেত্রে কোন পার্থক্য না থাকলেও স্কোপ, ম্যাথ, ফাংশন, ভেরিয়্যাবল, অপারেটর -এর মত ফাংশনালিটি আছে LESS এবং SASS/SCSS ডাইন্যামিক স্টাইলশীটে। CSS এ ভালো জ্ঞান থাকলে LESS এবং SASS সহজেই শিখে নিয়ে যায় তাদের অফিসিয়াল সাইট থেকে।

LESS -এর অফিসিয়াল সাইটঃ http://lesscss.org

SASS/SCSS- এর অফিসিয়াল সাইটঃ http://sass-lang.com

LESS এবং SASS সম্পর্কে আরও বিস্তারিত জানতে নিচের লিঙ্কগুলো সহায়ক হবেঃ

১। http://nex-3.com/posts/96-scss-sass-is-a-css-extension

২। http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

৩। http://www.hongkiat.com/blog/less-basic/

৪। http://www.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/

৫। http://webdesign.tutsplus.com/articles/get-into-less-the-programmable-stylesheet-language–webdesign-5216

 

LESS SASS/SCSS নিয়ে এতো শুধুমাত্র ইন্ট্রো পর্ব। পরবর্তীতে বিস্তারিত ভিডিও অথবা টেক্সট টিউটোরিয়াল শেয়ার করবো!

সবাই ভালো থাকুন!

ধন্যযোগ! 🙂

2 thoughts on “LESS এবং SASS স্টাইলশীট কি?

  1. সুন্দর একটা গ্রাফিক্যাল টুলস হচ্ছে http://alphapixels.com/prepros/
    এটা দিয়ে Less/Sass/Scss কম্পাইল করা যাবে। এছাড়া আরও দারুন সব ফিচার আছে টুলটিতে।

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.