Sass: একটি সুপার পাওয়ারফুল CSS প্রিপ্রসেসর

Sass official logo from http://sass-lang.com/

Introduction

Sass — Syntactically Awesome StyleSheets

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
— Sass official website

Sass হচ্ছে CSS এর একটি পাওয়ারফুল এক্সটেনশন। এর দ্বারা নেস্টেড রুলস, ভেরিয়েবল (variable), মিক্সিন, সিলেক্টর ইনহেরিটেন্স, ফাংশন, লুপ, কন্ডিশনস ইত্যাদি সহ আরো অনেক কিছু ব্যবহার করে আপনার CSS কোড কে অর্গানিজ করতে পারবেন। Sass প্রিপ্রসেসরে লিখা কোডকে কমান্ড লাইন টুলসের মাধ্যমে বা Sass বেসড ওয়েব ফ্রেমওয়ার্ক / প্লাগিন ইউজ করে স্ট্যান্ডার্ড CSS ফরম্যাট এ রূপান্তর করা হয়। Sass ব্যবহার করে কোডের redundancy, duplicacy কমানো যায়।

বর্তমানে Sass ভার্সন ৩ ব্যবহার করা হচ্ছে যার এক্সটেনশন হলো ‘.scss’ (Sassy CSS) এটা CSS এর super set. এর আগে Sass এর old version এর এক্সটেনশন ছিলো ‘.sass’. আপনি চাইলে যেকোনো একটি ব্যবহার করতে পারেন। দুই ভার্সন এর মাঝে সামান্য একটু পার্থক্য বিদ্যমান।

SCSS এর কোডিং স্টাইল

SCSS Code using https://www.sassmeister.com/

SASS এর কোডিং স্টাইল

Sass Code using https://www.sassmeister.com/

এছাড়া Sass এর দুই ভার্সনে তেমন কোনো পার্থক্য নেই। আপনি চাইলে এ বিষয়ে বিস্তারিত জানতে পারবেন এখান থেকে

Sass ইনস্টলেশন

Sass ব্যবহারের পূর্বে আপনার কম্পিউটার এ Sass ইনস্টল করতে হবে। Sass ইনস্টল করার অনেক গুলো পদ্ধতি রয়েছে। তার মধ্যে উল্লেখযোগ্য হচ্ছেঃ

Apps ইউজ করে Sass ব্যবহার

Compass.app
Koala
 — Scout-App

Command লাইন ব্যবহার করে Sass ইনস্টল

Linux:

প্রথম ধাপ : আপনি যদি লিনাক্স (Debian/Ubuntu) ইউজার হয়ে থাকেন তবে প্রথমে নিচের কমান্ড ব্যবহার করে Ruby ইনস্টল করুন ।

$ sudo apt-get install ruby-full

সাকসেসফুলি Ruby ইনস্টল কমপ্লিট হলে আপনার টার্মিনালে ruby -v কমান্ড চালিয়ে সিওর হতে পারেন। এটি ruby ভার্সন চেকিং কমান্ড।

দ্বিতীয় ধাপঃ এবার টার্মিনালে নিচের কমান্ড চালিয়ে Sass ইনস্টল করুন।

$ sudo gem install sass অথবা gem install sass

সাকসেসফুলি Sass ইনস্টল কমপ্লিট হলে আপনার টার্মিনালে sass -v কমান্ড চালিয়ে সিওর হতে পারেন। এটি sass ভার্সন চেকিং কমান্ড।

সবকিছু ঠিক থাকলে Sass ভার্সন Sass 3.5.1 দেখাবে।

Windows:

উইন্ডোজে Sass ব্যবহার করার জন্য TutorialsPoint এর এই টিউটোরিয়ালটি দেখতে পারেন। তাছাড়া লিনাক্স, উইন্ডোজ বা ম্যাক সব ব্যবহার কারিদের জন্য Sass এর অফিসিয়াল পেজ এ বিস্তারিত গাইডলাইন দেয়া আছে।

তাছাড়া আপনি অনলাইন Sass প্লেগ্রাউন্ড ব্যবহার করে Sass নিয়ে এক্সপেরিমেন্ট করতে পারেন।এমন একটি ওয়েবসাইট হলো SassMeister.

প্রিপ্রসেসিং

সবচাইতে সহজ উপায়ে sass বা scss ফাইল এ লেখা কোড css ফাইলে রূপান্তর করার জন্য আপনার টার্মিনালে নিচের মতো কমান্ড চালান -

sass input.scss output.css

আপনি চাইলে ওয়াচ মোড ইউজ করতে পারেন instant converting এর জন্য। এর example command

sass — watch app/sass:public/stylesheets

ভেরিয়েবল (variable)

অন্যান্য প্রোগ্রামিং ল্যাঙ্গুয়েজের মতো Sass এও ভ্যারিয়েবল ব্যবহার করা যায়। আপনি চাইলে কালার, ফন্ট সাইজ বা box-shadow এর মতো ভ্যালু একটি নির্দিষ্ট ভ্যারিয়েবলে স্টোর করে রাখতে পারেন এবং একাধিক জায়গায় ব্যবহার করতে পারেন। Sass ভ্যারিয়েবল ডিক্লেয়ার করার জন্য ‘ $ ’ সাইন ব্যবহার করা হয়।

SCSS Variable:

//variables
$title-font: normal 24px Helvetica, sans-serif;
$text-color: #333;
$bg-color: #0022FF;
$box-shadow: 0 5px 2px 0 rgba(20, 10, 30, 0.2);
//Coding Structure
body {
font: $title-font;
color: $text-color;
}
div {
background-color: $bg-color;
box-shadow: $box-shadow;
}

Compiled CSS

body {
font: normal 24px Helvetica, sans-serif;
color: #333;
}
div {
background-color: #0022FF;
box-shadow: 0 5px 2px 0 rgba(20, 10, 30, 0.2);
}

এটি একই কোড একাধিকবার ইউজ করার জন্য একটি পাওয়ারফুল আইডিয়া।আমাদের যদি কোনো ভ্যালু চেঞ্জ করার প্রয়োজন হয় তবে পুরো CSS ফাইল খুঁজে খুঁজে সেই নির্দিষ্ট জিনিসটার মান চেঞ্জ করা লাগবে না। জাস্ট নির্দিষ্ট ভ্যারিয়েবলের ভ্যালু চেঞ্জ করলেই কাজ শেষ।

নেস্টেড রুলস (Nested Rules)

আমরা HTML কোড লেখার সময় নেস্টেড রুলস ফলো করি যার একটি ভিজ্যুয়াল hierarchy চোখে পড়ে। কিন্তু CSS এ তা নাই, যার জন্য একই কোড একাধিকবার লিখতে হয়। যাতে সময় এবং শ্রম উভয়ই বেশি লাগে। Sass আমাদেরকে এই সমস্যার একটি কার্যকরী সমাধান দিয়েছে।

//variables
$title-font: normal 24px Helvetica, sans-serif;
$text-color: #333;
$bg-color: #0022FF;
$box-shadow: 0 5px 2px 0 rgba(20, 10, 30, 0.2);
//Nested Coding Structure
body {
font: $title-font;
color: $text-color;

div {
background-color: $bg-color;
box-shadow: $box-shadow;

a {
text-decoration: none;
}
}
}

Compiled CSS

body {
font: normal 24px Helvetica, sans-serif;
color: #333;
}
body div {
background-color: #0022FF;
box-shadow: 0 5px 2px 0 rgba(20, 10, 30, 0.2);
}
body div a {
text-decoration: none;
}

খেয়াল করে দেখুন প্রথমে body কে স্টাইল করা হয়েছে। অতঃপর div এবং সবশেষে a ট্যাগকে। এখানে একটি সুন্দর ভিজ্যুয়াল hierarchy চোখে পড়ছে যা আপনার কোডকে আরো বেশি রিডেবল করে তুলেছে।

মিক্সিন (Mixin)

মিক্সিন হচ্ছে অন্যান্য প্রোগ্রামিং ল্যাঙ্গুয়েজের Constructor ক্লাসের মতো। আপনি চাইলে মিক্সিন ব্যবহার করে CSS স্টাইল সেটের একটা গ্রুপ তৈরী করতে পারেন এবং সেই গ্রুপ অফ css স্টাইল আপনার ইচ্ছে মত যে কোনো সিলেক্টর এ ব্যবহার করতে পারেন। এতে কোডের রিডেবিলিটি ও ইউজেবিলিটি উভয়ই বৃদ্ধি পায়।

SCSS @mixin

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
@mixin square($size, $color) {
width: $size;
height: $size;
background-color: $color;
}
.box { 
@include border-radius(5px);
}
.small-blue-square {
@include square(50px, blue);
}
.big-red-square {
@include square(250px, red);
}

Compiled CSS

.box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
.small-blue-square {
width: 50px;
height: 50px;
background-color: blue;
}
.big-red-square {
width: 250px;
height: 250px;
background-color: red;
}

mixin ক্রিয়েট করার জন্য @mixin এবং মিক্সিন ব্যবহার করার জন্য @include ইউজ করা হয়।

এক্সটেন্ড বা ইনহেরিটেন্স (Extend or Inheritance)

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

SCSS @extend

.navbar {
margin: 20px;
padding: 10px;
background-color: #FAD24A;
font: 100% normal Helvetica, sans-serif;
}
.container {
@extend .navbar;
border: 2px solid green;
border-radius: 10px;
}

Compiled CSS

.navbar, .container {
margin: 20px;
padding: 10px;
background-color: #FAD24A;
font: 100% normal Helvetica, sans-serif;
}
.container {
border: 2px solid green;
border-radius: 10px;
}

অপারেটর (Mathematical Operators)

Sass এ ম্যাথেমেটিক্যাল অপারেটর +, -, x, /, % ইত্যাদি নিয়েও কাজ করা যায়।

SCSS

$color: blue;
$width: 1200px;
.container {
width: $width;
height: 100vh;

.column {
width: $width / 4;
background-color: $color;
}
}
.sidebar {
width: ($width - 200) / 2;
color: $color + red;
}

Compiled CSS

.container {
width: 1200px;
height: 100vh;
}
.container .column {
width: 300px;
background-color: blue;
}
.sidebar {
width: 500px;
color: magenta;
}

ফাংশন (Function)

Sass এর অনেকগুলো বিল্ট-ইন ফাংশন লিস্ট রয়েছে। ফুল লিস্ট দেখা যাবে এখান থেকে

এছাড়াও আপনি আপনার প্রয়োজন মতো ফাংশন তৈরিও করতে পারেন।

আমরা এখানে বিল্ট-ইন darken( ) ফাংশন টি ব্যবহার করবো :

SCSS Function :

$awesome-blue: #2196F3;
a {
padding: 10px 15px;
background-color: $awesome-blue;
}
a:hover {
background-color: darken($awesome-blue,10%);
}

Compiled CSS

a {
padding: 10px 15px;
background-color: #2196F3;
}
a:hover {
background-color: #0c7cd5;
}

এছাড়া আপনিও ফাংশন বানাতে পারেন এভাবে -

Custom Function:

$grid-width: 40px;
$gutter-width: 20px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
.sidebar {
width: grid-width(5);
}

Compiled CSS:

.sidebar {
width: 280px;
}

Sass ফ্লো কন্ট্রোল সাপোর্ট করে।

ইম্পোর্ট (Import)

CSS এর মতো Sass ও @import কমান্ড ইউজ করে এক বা একাধিক sass বা scss ফাইল ইম্পোর্ট করা যায়। কিন্তু মজার বিষয় হচ্ছে sass এ ফাইলের এক্সটেনশন বলে দেয়া লাগে না। যেমন ধরুন আপনার একটি main.scss এবং _reset.scss নামে দুইটা ফাইল আছে। আপনি main.scss এর মধ্যে _reset.scss ফাইলটি ইম্পোর্ট করতে চাচ্ছেন। তাহলে নিচের মতো কোড লিখুন -

@import ‘reset’;

আপনার কাঙ্খিত ফাইল ইম্পোর্ট হয়ে যাবে।

Summary

CSS প্রতিনিয়ত আপডেট হচ্ছে; সাথে বিভিন্ন নতুন নতুন স্টাইল, অ্যানিমেশন, ফর্মুলা ইত্যাদি আসছে। তবুও কিছু কিছু ক্ষেত্রে এখনো সীমাবদ্ধতা আছে। এইসব সীমাবদ্ধতা কাটিয়ে আপনার স্টাইল শিট কে আরো আকর্ষণীয় ও সহজবোদ্ধ করতে Sass ব্যবহারের জুড়ি নাই।

আরো জানতে চাইলে ভিজিট করুন

P.S: শেষ পর্যন্ত পড়ার জন্য ধন্যবাদ। আমি একজন উঠতি ফ্রন্ট এন্ড ডেভেলপার। আমি আমার জানার সবটুকু দিয়ে ভালো মানের লেখা উপহার দেয়ার চেষ্টা করেছি। তবুও অনেক ভুল ত্রুটি চোখে পড়তে পারে সে জন্য ক্ষমাপ্রার্থী। ভুলগুলো ধরিয়ে দিলে কৃতজ্ঞ থাকব। আবারো ধন্যবাদ।