sass ফাইল ষ্ট্র্যাকচার

 

আমরা জানি সাস লজিক্যালী/ডায়নামিক্যালি লোড হয় সেহেতু সাস ফাইলে হিবিজিবি টাইপ কোড রাখার কোন কোন মানে নাই। তাছাড়া ক্লিন কোডের কোন ডকুমেন্টেশন লাগেনা, ক্লিন কোড নিজেই তার ডকুমেন্টেশন। তো চলুন দেখে নেয়া যাক আমরা কিভাবে sass ফাইল রাখতে পারি।

style/

_variables.scss

_mixins.scss

_path.scss

_core.scss

_icons.scss

style.scss

এভাবে রাখতে পারি, আমাদের কোড হবে ছোট ছোট ব্লকে সাজানো, সুতরাং পড়তে কিংবা পূনরায় কোডে মেরামত গেলে আমরা দেখেই বুঝতে পারব কোথায় কি আছে। আপনি যদি বড় কোন প্রজেক্ট করেন তার জন্য ফ্রন্টএন্ডের কোড আলাদা আর ব্যকএন্ডের কোড আলাদা রাখতে পারেন। একটা বস্তায় সবকিছু একসাথে না রেখে প্রথমে ছোট ছোট ব্যাগে সবকয়টাকে আলাদা আলাদা প্যাক করে তারপরে সবকয়টাকে বস্তায় ভরে দিন। :p

 

আমাদের  ‍style.scss ফাইলে আমরা কোন ষ্টাইল কিংবা কমান্ড লেখবনা শুধুমাত্র সবকয়টা ফাইলকে কল করে রাখব, আর বাদ বাকী কাজ কম্পাইলাররে দিয়া দিমু। কম্পাইলার সবকয়টাকে পড়ুক তারপরে সেগুলোকে কম্পাইল করুক,আমরা হিবিজিবি করতে যাবনা।

 

style.scss ফাইল সিম্পলি এমন থাক।

 

// import variables

@import "style/variables";



// import mixins

@import "style/mixins";



// import path

@import "style/path";



// import project core data

@import "style/core";


// import icon

@import "style/icons";

আর যে কোন বিষয়ে যদি আপনি প্রথম থেকে অভ্যস্ত হয়ে পড়েন ছোট থেকেই তখন আর আপনার কোড কোয়ালিটি নিয়ে পরে চিন্তা করা লাগবেনা। আর হ্যা অবশ্যই কোড লেখবেন কমেন্ট সহ। কোডটা এমন হওয়া চাই যেন কোড দেখেই যে কেউ আপনার উপর ক্র্যাশ খেয়ে যায়। :p

 

লেখায় কোনপ্রকার ভুলত্রুটি ধরা পড়লে অবশ্যই ধরিয়ে দিয়ে বাধিত করবেন। এবং কোন সাজেশন থাকলে নির্দিধায় বলতে পারেন।

সাস ইন লেসি ওয়ে (প্রথম পর্ব) ভেরিয়েবল

 

এই লেখা দেখে প্র্যাকটিস শুরু করার পূর্বে অবশ্যই সি.এস.এস টা  শিখে নিবেন তারপর প্র্যাকটিস শুরু কইরেন।

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

দেখা যাক সাস দিয়ে আমরা প্রাথমিক কি কি সুবিধা পাচ্ছি।

যেমন আমরা সি.এস.এস লেখতে গেলে

 

.selector-1{

background-color: grey;

color: white;

}

.selector-2{

background-color: red;

color: white;

}

এখন আমরা ঠিক এই কোড সাস ওয়েতে লিখতে গেলে ঠিক কি লিখব দেখা যাক।

আমরা একটা ভেরিয়েবল নিব সাদা কালারের জন্য।

 

$bg-color: grey;
$front-color: white;

.selector{
background-color: $bgcolor;
color: $front-color;
}

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

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

বিঃদ্রঃ আমি ও একজন সাস নোব, সো সকল প্রকার ভুলত্রুটি মার্জনার চোখে দেখবেন। এবং ভুলত্রুটি ধরিয়ে দেওয়ার অনুরোধ রইল।