() translation by (you can also view the original English article)
বুটস্ট্র্যাপ ফ্রেমওয়ার্ক অনেক জনপ্রিয় - আপনি প্রি প্রসেসর নিয়ে কাজ করতে পছন্দ করলে এটা নিশ্চই পছন্দ করেন। কারণ এটি লেস সাপোর্ট করে। কিন্তু, আমার মত (আপনি) স্যাস পছন্দ করলে, সেটা এই ফ্রেমওয়ার্কে সুবিধামত ব্যবহারের কোন উপায় নেই।
বেরমন পেইন্টারের বানানো নতুন স্যাস লোগো
আমরা আগে Webdesigntuts+ এ স্যাস ও কম্পাস পরিচিতি কভার করেছি। সেটা চাইলে দেখে নিতে পারেন।
ধাপ ১ঃ দরকারী ডাউনলোড
আমরা কিছু জিনিষ ডাউনলোড করে নিবো। একটা টেক্সট এডিটর লাগবে। আমি ওয়েবস্টর্ম ব্যবহার করি। কিন্তু আপনার যা ইচ্ছা আপনি ব্যবহার করতে পারেন।
rubyinstaller.org এ গিয়ে, রুবি ডাউনলোড করুন, এখানে আমরা rubyinstaller-1.9.3-p286 ভার্সন ব্যবহার করছি।
ডাউনলোড শেষে, একটা লাইভ রিলোডার সেটাপ করুন, যেমন স্কাউট বা লাইভরিলোড।
এরপর গুটিহাব থেকে বুটস্ট্র্যাপের স্যাস ভার্সন ডাউনলোড করে নিন। ( এটার নির্মাতা থমাস ম্যাকডনাল্ড)
ডাউনলোড শেষ।
ধাপ ২ঃ ম্যানিয়া ইন্সটম
রুবি আর স্কাউট ইন্সটল করুন।
একটা ফোল্ডারে বুটস্ট্র্যাপের ফাইল আনজিপ করে রাখুন।
C:\ কমান্ড প্রম্পট ওপেন করে টাইপ করুন gem install compass ।
এতে কম্পাস ইন্সটল হবে, সামান্য সময় লাগবে ( এই ফাঁকে কদি খেয়ে নিন )। হলে, কমান্ড প্রম্পট কোজ করে দিন।
যেই ফোল্ডারে কাজ হচ্ছে সেটায় Shift+Right Click করে আবার কমান্ড প্রম্পট ওপেন করে compass create YourProjectName টাইপ করে এন্টার দিন। প্রম্পটে ও ফোল্ডারে নুয়াভিগেট করে গিয়ে চেক করুন। কিভাবে করবেন জানতে A Designer’s Introduction to the Command Line পড়ে দেখুন।
কম্পাস স্যাস প্রজেক্ট রেডি।
ধাপ ৩ঃ আসল কাজ
বুটস্ট্র্যাপ ওপেন করুন।
'YourTempFolder\thomas-mcdonald-bootstrap-sass-dabed1e\vendor\assets' এ গিয়ে এসেট চেক করে নিন। ie, screen, এবং print.scss ডিলিট করে দিন।
এমন দেখাবেঃ
এখানে আমরা অফিশিয়াল সাইট থেকে নেয়া fluid.html ফাইলের ডিজাইন নিয়ে কাজ করব।
সাইটে গিয়ে এই ফাইলের সোর্স কপি করে নিন। টেক্সট এডিটরে মাত্র পেজ সোর্স থেকে কপি করা সেই কোড পোষ্ট করুন।
href="../assets/ico/favicon.ico" এডিট করে href="images/favicon.ico".করে নিন।
"stylesheets/style.css" রেফারেন্স চেক করে নিন! jquery.js ও bootstrap.js এর চেঞ্জ চেক করে নিন। প্রজেক্ট পাথ চেক করুন।
স্যাসের ফোল্ডারে style.scss নামের একটা ফাইল তৈরি করুন। স্কাউট সেটা নিয়ে কাজ করবে। স্কাউট অ্যাপ অন করুন। অন করার পর এমন দেখাবে।
এটা সিএসএস অটোম্যাটিক আপডেট করবে। 'compass watch' কমান্ড ব্যবহার করুন।
এডিটরে style.scss ওপেন করুন। @import 'bootstrap'; এবং @import 'bootstrap-responsive'; দুটি ইমপোর্ট রুল অ্যাড করুন। সেভ করি নিন!
কনগ্র্যাচুলেশনস! বুটস্ট্র্যাপ স্যাস রেডি!
নোটঃ /bootstrap/_mixins.scss এবং /bootstrap/_variables.scss দুই ডায়রেক্টরিতে গিয়ে মিক্সিন ভ্যারিয়েবল চেঞ্জ করে নেয়া যায়।
পরিশেষ
সচেতন ভাবে ব্যবহার করুন! এই দুইটা অনেক শক্তিশালী ফিচার। বুটস্ট্র্যাপ শিখতে Bootstrap 101 series বা Twitter's Bootstrap Website চেক করুন। আর থমাস ম্যাকডোনাল্ডকে ধন্যবাদ জানিয়ে একটি মেসেজ পাঠিয়ে দিন!
রিসোর্স
কিছু অতিরিক্ত রিসোর্সের লিংক
