Advance CSS শিখুন বাংলায় (পর্ব ১) — SCSS/SASS পরিচিতি ও বেসিক সিনট্যাক্স

আমাদের Advanced HTML সিরিজ শেষ হয়েছে গত পর্বে একটা মিনি প্রজেক্ট দিয়ে। এবার শুরু হচ্ছে Advanced CSS সিরিজ — আর প্রথম টপিক হলো SCSS/SASS, যেটা সাধারণ CSS লেখাকে আরও শক্তিশালী আর সংগঠিত করে তোলে।

SASS/SCSS কী?

SASS (Syntactically Awesome Style Sheets) হলো CSS-এর একটা "প্রিপ্রসেসর" — মানে তুমি একটা আলাদা সিনট্যাক্সে লিখবে, তারপর সেটা কম্পাইল হয়ে সাধারণ CSS-এ পরিণত হবে, যেটা ব্রাউজার বোঝে। SASS-এর দুইটা সিনট্যাক্স আছে: পুরনো ইনডেন্টেশন-ভিত্তিক .sass, আর বেশি জনপ্রিয় কার্লি-ব্রেস ভিত্তিক .scss — যেটা দেখতে প্রায় সাধারণ CSS-এর মতোই, শুধু কিছু অতিরিক্ত ফিচার আছে।

SCSS কেন ব্যবহার করবে?

• ভ্যারিয়েবল ব্যবহার করা যায় (রঙ, ফন্ট সাইজ বারবার লেখার দরকার নেই)
• নেস্টিং — CSS সিলেক্টর একটার ভেতর একটা লেখা যায়, HTML স্ট্রাকচারের মতো
• Mixin ও ফাংশন দিয়ে কোড পুনর্ব্যবহার করা যায়
• একাধিক ফাইলকে ভাগ করে সংগঠিত রাখা যায় (partials)

সেটআপ করা

Node.js ইনস্টল থাকলে npm দিয়ে খুব সহজে SASS কম্পাইলার বসানো যায়:

npm install -g sass

# style.scss ফাইলকে style.css-এ কম্পাইল করা
sass style.scss style.css

# পরিবর্তন করলেই স্বয়ংক্রিয়ভাবে কম্পাইল হতে থাকবে
sass --watch style.scss:style.css

ভ্যারিয়েবল

SCSS-এ $ চিহ্ন দিয়ে ভ্যারিয়েবল বানানো যায় — যেমন প্রধান রঙ, ফন্ট, স্পেসিং একবার লিখে বারবার ব্যবহার করা।

// style.scss
$primary-color: #2563eb;
$secondary-color: #16a34a;
$font-stack: 'Segoe UI', sans-serif;
$spacing: 16px;

.button {
  background: $primary-color;
  font-family: $font-stack;
  padding: $spacing;
}

.button-secondary {
  background: $secondary-color;
  font-family: $font-stack;
  padding: $spacing;
}

এটা কম্পাইল হয়ে সাধারণ CSS-এ পরিণত হয়:

/* style.css (কম্পাইল হওয়ার পর) */
.button {
  background: #2563eb;
  font-family: 'Segoe UI', sans-serif;
  padding: 16px;
}

.button-secondary {
  background: #16a34a;
  font-family: 'Segoe UI', sans-serif;
  padding: 16px;
}

সুবিধা: পরে যদি প্রধান রঙ পাল্টাতে হয়, শুধু একজায়গায় $primary-color-এর মান বদলালেই পুরো সাইটে পরিবর্তন হয়ে যাবে — সাধারণ CSS-এ প্রতিটা জায়গায় খুঁজে খুঁজে বদলাতে হতো।

নেস্টিং

SCSS-এ একটা সিলেক্টরের ভেতর আরেকটা সিলেক্টর লেখা যায় — এতে CSS-এর গঠন HTML-এর স্ট্রাকচারের সাথে মিলে যায়, পড়তেও সহজ হয়।

.navbar {
  background: #1e293b;
  padding: 12px;

  ul {
    display: flex;
    list-style: none;

    li {
      margin-right: 16px;

      a {
        color: white;
        text-decoration: none;

        &:hover {
          color: #2563eb;
        }
      }
    }
  }
}

& চিহ্নটা "প্যারেন্ট সিলেক্টর"-কে বোঝায় — এখানে &:hover মানে a:hover। এটা কম্পাইল হয়ে যা দাঁড়ায়:

.navbar { background: #1e293b; padding: 12px; }
.navbar ul { display: flex; list-style: none; }
.navbar ul li { margin-right: 16px; }
.navbar ul li a { color: white; text-decoration: none; }
.navbar ul li a:hover { color: #2563eb; }

সতর্কতা: নেস্টিং খুব বেশি গভীর করলে (৩-৪ লেভেলের বেশি) কম্পাইল হওয়া CSS-এর সিলেক্টর অনেক লম্বা আর ভারী হয়ে যায়, যা পারফরম্যান্সের জন্য খারাপ। ৩ লেভেলের বেশি না যাওয়াই ভালো অভ্যাস।

Mixin — পুনর্ব্যবহারযোগ্য স্টাইল ব্লক

@mixin দিয়ে একটা স্টাইলের গ্রুপ বানিয়ে বারবার ব্যবহার করা যায় — অনেকটা ফাংশনের মতো, প্যারামিটারও দেওয়া যায়।

@mixin flex-center($direction: row) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: $direction;
}

.card {
  @include flex-center;
  height: 200px;
}

.column-box {
  @include flex-center($direction: column);
  height: 300px;
}

এখানে $direction: row একটা ডিফল্ট মান — না দিলে row ব্যবহার হবে, দিলে সেটাই বসবে।

@if/@else — কন্ডিশনাল স্টাইল

SCSS-এ শর্তসাপেক্ষ স্টাইলও লেখা যায় — Mixin-এর সাথে মিলিয়ে খুব কাজে লাগে।

@mixin button-style($type) {
  @if $type == 'primary' {
    background: #2563eb;
    color: white;
  } @else if $type == 'danger' {
    background: #dc2626;
    color: white;
  } @else {
    background: #e5e7eb;
    color: #111827;
  }
}

.btn-primary {
  @include button-style('primary');
}

.btn-danger {
  @include button-style('danger');
}

@each — লুপ দিয়ে বারবার লেখা এড়ানো

একই ধরনের একাধিক ক্লাস বানাতে হলে @each লুপ খুব সময় বাঁচায়:

$colors: (
  "primary": #2563eb,
  "success": #16a34a,
  "danger": #dc2626,
  "warning": #f97316
);

@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }
  .bg-#{$name} {
    background: $color;
  }
}

এই একটুখানি কোড থেকে .text-primary, .bg-primary, .text-success সহ মোট ৮টা ক্লাস স্বয়ংক্রিয়ভাবে তৈরি হয়ে যাবে — #{} হলো "ইন্টারপোলেশন", যেটা ভ্যারিয়েবলের মান সরাসরি ক্লাস নামের ভেতর বসিয়ে দেয়।

লাইভ ডেমো — SCSS বনাম CSS পাশাপাশি

নিচে SCSS কোড আর সেটা কম্পাইল হয়ে যে CSS হয়, দুটোই পাশাপাশি দেখো:

SCSS (তুমি যা লেখো)

$gap: 10px;

.box {
  padding: $gap;
  &:hover {
    padding: $gap * 2;
  }
}

CSS (কম্পাইলার যা বানায়)

.box {
  padding: 10px;
}
.box:hover {
  padding: 20px;
}

এটাই উপরের SCSS কোডের আচরণ — হোভার করলে padding দ্বিগুণ হয়ে যায়

Partials ও @use — ফাইল ভাগ করা

বড় প্রজেক্টে সব CSS একটা ফাইলে না রেখে ছোট ছোট ফাইলে ভাগ করা হয় — এগুলোকে "partials" বলে, ফাইলের নাম শুরু হয় আন্ডারস্কোর (_) দিয়ে।

// _variables.scss
$primary-color: #2563eb;
$spacing: 16px;

// _buttons.scss
@use 'variables' as v;

.btn {
  background: v.$primary-color;
  padding: v.$spacing;
}

// style.scss (মূল ফাইল)
@use 'variables';
@use 'buttons';

এভাবে ভ্যারিয়েবল, মিক্সিন, বাটন স্টাইল — সবকিছু আলাদা ফাইলে রেখে প্রজেক্ট গুছিয়ে রাখা যায়, যেটা তোমার অ্যাডমিন ড্যাশবোর্ড বা Pathok Ghar-এর মতো বড় প্রজেক্টে খুব কাজে লাগবে।

নিজে চেষ্টা করো

Exercise:

1. একটা $theme-color ভ্যারিয়েবল বানিয়ে ৩টা ভিন্ন এলিমেন্টে ব্যবহার করো, তারপর একবার মান পাল্টে দেখো সবগুলো একসাথে বদলায় কিনা।
2. একটা নেভিগেশন বার নেস্টেড সিনট্যাক্স দিয়ে লিখো, & ব্যবহার করে hover স্টেট যোগ করো।
3. @mixin দিয়ে একটা কার্ড শ্যাডো স্টাইল বানাও যেটা প্যারামিটার হিসেবে shadow-এর গাঢ়ত্ব নেয়।
4. @each লুপ দিয়ে ৫টা ভিন্ন spacing ক্লাস (.p-1 থেকে .p-5) স্বয়ংক্রিয়ভাবে তৈরি করো।

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব CSS Architecture — BEM Naming Convention — কীভাবে ক্লাস নামকরণের একটা সুশৃঙ্খল পদ্ধতি অনুসরণ করে বড় প্রজেক্টেও CSS গোলমাল ছাড়া সংগঠিত রাখা যায়।