About of SASS. Part-2

About of SASS. Part-1

A simple example why use SASS id useful?

Suppose আপনার ওয়েবসাইটের তিনটি কালার। তিনটি কালার হলো-

#F7F7F7, #DEDEDE, #EEEEEE.

সুতরাং, এই HEX কালার কোড গুলো কতবার লিখতে হবে? অবশ্যই অনেক বার লিখতে হবে। আপনি চাইলে SASS এর মাধ্যমে খুব সহজে বার বার HEX কোড লিখা থেকে মুক্ত হতে পারেন।

Example:

/* define variables for the primary colors */

$primary_1: #F7F7F7;

$primary_2: #DEDEDE;

$primary_3: #EEEEEE;

/* use the variables */

.main-header {

background-color: $primary_1;

}

.menu-left {

background-color: $primary_2;

}

.menu-right {

background-color: $primary_3;

}

এখন আপনি যদি এখনে Primary_1 কালার পরিবর্তন করতে চান তাহলে শুধু

$primary_1: এখানে কালার টা পরিবর্তন করে দিলে হবে তাহলে সম্পূর্ণ ওয়েবসাইটের Primary_1 কালার পরিবর্তন হয়ে যাবে।

How does SASS work?

সাধারনত ব্রাউজার SASS কোড বুঝতে পারে না, এই জন্য আপনার SASS কোড কে সাধারণ CSS -এ কনভার্ট করতে হবে। আর এই কনভার্ট করার প্রক্রিয়া কে transpiling বলে।

Tip: Transpiling is a term for taking a source code written in one language and transform/translate it into another language.

এখন প্রশ্ন হচ্ছে, SASS কে যদি আবার কষ্ট করে CSS -এ কনভার্ট করা লাগে তাহলে আর SASS -এর সুবিধা কি?

আপনাকে কষ্ট করে SASS কে CSS -এ কনভার্ট করতে হবে না। জী, আপনি ঠিক ই পড়তেছেন🙃। যদি আপনার কম্পিউটারে গ্লোবাল SASS ইন্সটল করা থাকে তাহলে আপনার কম্পিউটার এর Terminal -এ গিয়ে sass command দিয়ে আপনার SASS ফাইলের লোকেশন SPACE কনভার্টকৃত CSS ফাইল টি কোথায় Save করবেন এর লোকেশন এবং কি নামে Save করবেন ফাইলের নাম দিয়ে enter প্রেস করলে একটি CSS ফাইল তৈরি হয়ে যাবে।

Example:

sass scss/input.scss css/output.css

এছাড়া আপনি যদি vs code ব্যবহার করে থাকেন তাহলে সহজে “Live Sass Compiler” এক্সটেনশনের মাধ্যমে সহজে SASS কে CSS এ কনভার্ট করতে পারবেন।।

More Details:- https://sass-lang.com/guide

Mahbubur Rahman

Campus Ambassador, Programming Hero

Comilla Private Polytechnic Institute