Sass আর PostCSS — CSS-এর সহকারী টুল

১ · সহকারী টুল কী — ব্রাউজারের আগে আর পরে

মিরপুরের একটি অনলাইন পোশাকের দোকানের সাইট বানাচ্ছেন নাদিয়া। CSS ফাইল এখন দুই হাজার লাইনের। দোকানের মূল রং teal — সেটি লেখা আছে ষাট জায়গায়। প্রতিটি বোতামের জন্য একই পাঁচ লাইন বারবার কপি করা। আর পুরোনো iPhone-এ কিছু নকশা ঠিক দেখায় না, কারণ সেখানে কোনো কোনো property-র আগে -webkit- লাগত। নাদিয়া ভাবছেন — এগুলো হাতে হাতে সামলানোর কি কোনো সহজ উপায় নেই?

উপায় আছে, আর সেটি দুই রকম টুল। দুটিই চলে আপনার কম্পিউটারে, পাতা প্রকাশের আগে — এই ধাপকে বলে build step.

• Preprocessor (যেমন Sass): CSS-এর চেয়ে একটু বেশি ক্ষমতার একটি ভাষায় আপনি লেখেন — variable, loop, mixin. টুলটি সেটি পড়ে সাধারণ CSS বানায়। অর্থাৎ CSS তৈরির আগের ধাপ।
• Postprocessor (যেমন PostCSS): হাতে নেয় একটি তৈরি CSS ফাইল, আর তাকে বদলায় — prefix বসায়, নতুন syntax পুরোনো ব্রাউজারের উপযোগী করে, ফাইল ছোট করে। অর্থাৎ CSS তৈরির পরের ধাপ।

২ · Sass variable — compile হলেই উধাও

Sass-এর প্রথম আকর্ষণ ছিল variable. নাম শুরু হয় $ দিয়ে: $brand: #0f766e;. তারপর যেখানে রংটি লাগবে, সেখানে লিখুন $brand. বাঁ পাশে আপনি যা লেখেন, ডান পাশে Sass যা বানায়:

$brand: #0f766e;
$radius: 10px;
$space: 1rem;

.offer {
  padding: $space;
  border: 2px solid $brand;
  border-radius: $radius;
}
.offer-btn {
  background: $brand;
  border-radius: $radius;
}

.offer {
  padding: 1rem;
  border: 2px solid #0f766e;
  border-radius: 10px;
}
.offer-btn {
  background: #0f766e;
  border-radius: 10px;
}

খেয়াল করুন, আউটপুটে কোনো $ নেই — variable-এর ঘোষণার লাইনগুলো পুরো উধাও, আর প্রতিটি ব্যবহারের জায়গায় মানটি বসে গেছে। ব্রাউজার যে ফাইল পায়, সেটিই নিচের এডিটরে (সাথে কয়েকটি সাজানোর লাইন)। এটি বদলে দেখুন:

/* Sass-এর তৈরি CSS — এখানে আর কোনো variable নেই */
.offer {
  font-family: sans-serif;
  max-width: 22rem;
  padding: 1rem;
  border: 2px solid #0f766e;
  border-radius: 10px;
}
.offer-btn {
  background: #0f766e;
  color: white;
  border: 0;
  padding: .5rem 1rem;
  border-radius: 10px;
}

Sass variable বনাম CSS custom property

পর্ব ৩৩-এ CSS custom property (--brand) বিস্তারিত দেখেছেন। দুটির পার্থক্য মনে করিয়ে দিই — এক কথায়, Sass variable ছাঁচ, custom property জীবন্ত:

শেষ সারিটি অবহেলা করবেন না — Sass ভুল নাম ধরিয়ে দেয়, ব্রাউজার দেয় না। এবার “জীবন্ত” কথাটির মানে নিজে দেখুন। একই কার্ড, কিন্তু রং রাখা হয়েছে custom property-তে:

.offer {
  --brand: #0f766e;
  font-family: sans-serif;
  max-width: 22rem;
  padding: 1rem;
  border: 2px solid var(--brand);
  border-radius: 10px;
}
.offer:hover { --brand: #be123c; }

.offer-btn {
  background: var(--brand);
  color: white;
  border: 0;
  padding: .5rem 1rem;
  border-radius: 10px;
}
@media (width < 20rem) {
  .offer { --brand: #7c3aed; }
}

Sass ভেতরে আসলে কী করে, সেটি বুঝতে একটি খুদে “Sass variable compiler” নিজে চালিয়ে দেখুন। মাত্র দুটি regular expression দিয়ে এটি variable-এর ঘোষণা মনে রাখে, মুছে দেয়, আর ব্যবহারের জায়গায় মান বসায়:

const scss = `$brand: teal;
$gap: 12px;
.btn { color: $brand; padding: $gap; }
.card { border: 2px solid $brand; }`;

const vars = {};
const out = scss
  // ধাপ ১: "$নাম: মান;" লাইন মনে রাখো, আউটপুট থেকে মুছে দাও
  .replace(/^\s*\$([\w-]+)\s*:\s*([^;]+);\s*$/gm, (all, name, value) => {
    vars[name] = value.trim();
    return '';
  })
  // ধাপ ২: বাকি প্রতিটি $নাম-এর জায়গায় তার মান বসাও
  .replace(/\$([\w-]+)/g, (all, name) => {
    if (!(name in vars)) throw new Error('Undefined variable: $' + name);
    return vars[name];
  })
  .trim();

console.log(JSON.stringify(vars));
console.log(out);

৩ · Nesting — Sass-এর আর ব্রাউজারের

Sass-এর দ্বিতীয় বড় আকর্ষণ ছিল nesting: সংশ্লিষ্ট নিয়ম বাইরের নিয়মের ভেতরে লেখা, & মানে বাইরের selector. পর্ব ৩৫-এ দেখেছেন, এখন native CSS nesting ব্রাউজারেই চলে (Baseline Newly available ২০২৩ সালের ডিসেম্বরে, ৩০ মাসের নিয়মে ২০২৬-এর মাঝামাঝি থেকে Widely available). দেখতে প্রায় এক, কিন্তু দুটি জায়গায় ফল আলাদা:

.card {
  padding: 1rem;
  &:hover { outline: 2px solid; }
  &__title { font-weight: 700; }
}
#hero, .banner {
  p { color: gray; }
}

.card {
  padding: 1rem;
}
.card:hover {
  outline: 2px solid;
}
.card__title {
  font-weight: 700;
}
#hero p, .banner p {
  color: gray;
}

• নাম জোড়া লাগানো: Sass-এ &__title লেখা হিসেবে জোড়া লেগে হয় .card__title — BEM নামকরণে (পর্ব ৪৬) খুব জনপ্রিয় কৌশল। Native CSS-এ & একটি selector, লেখার টুকরো নয়; সেখানে &__title কিছুই ধরে না, আর কোনো error-ও দেখায় না।
• Specificity: Sass কমা-তালিকা খুলে দুটি আলাদা selector বানায় — .banner p-এর ওজন (0,1,1). ব্রাউজারের native nesting বাইরের তালিকাকে :is(#hero, .banner) হিসেবে ধরে, তাই .banner-এর ভেতরের p-ও id-র ওজন (1,0,1) পায়। Sass থেকে native nesting-এ সরে আসলে কোনো কোনো রং হঠাৎ বদলে যায় এই কারণেই।

৪ · Partial আর module system — @use ও @forward

বড় প্রজেক্টে সব CSS এক ফাইলে রাখলে খুঁজে পাওয়া কঠিন। Sass ফাইল ভাগ করতে দেয়: রঙের জন্য একটি, বোতামের জন্য একটি, লেআউটের জন্য একটি। যে ফাইলের নাম _ দিয়ে শুরু (যেমন _tokens.scss), সেটি partial — Sass তাকে আলাদা CSS ফাইল বানায় না, অন্য ফাইল টেনে নিলে তবেই কাজে লাগে।

ফাইল টানার আধুনিক নিয়ম @use. আগে সবাই লিখতেন @import, কিন্তু তার তিনটি বড় সমস্যা ছিল: সব variable সব ফাইলে global হয়ে যেত (কোন $brand কোথা থেকে এলো বোঝা কঠিন), একই ফাইল কয়েকবার import হলে তার CSS-ও কয়েকবার আউটপুটে আসত, আর দুই library-র একই নামের mixin একে অপরকে চাপা দিত। ২০১৯ সালে আসে module system; ২০২৪ সালে Dart Sass 1.80 থেকে Sass-এর @import আনুষ্ঠানিকভাবে deprecated — ব্যবহার করলে সতর্কবার্তা আসে, আর Dart Sass 3.0-তে এটি সরিয়ে ফেলা হবে।

নিচের ডায়াগ্রামে একটি ছোট প্রজেক্টের চারটি ফাইল ধাপে ধাপে দেখুন — শেষে কোন CSS তৈরি হয়:

$brand: #0f766e !default;
$radius: 10px !default;
$-secret: 3px;   // - দিয়ে শুরু = private, বাইরে দেখা যায় না

@use "tokens";

@mixin card {
  border: 2px solid tokens.$brand;
  border-radius: tokens.$radius;
}

@forward "tokens";
@forward "mixins";

@use "abstracts" as a;

.offer {
  @include a.card;
  color: a.$brand;
}

.offer {
  border: 2px solid #0f766e;
  border-radius: 10px;
  color: #0f766e;
}

৫ · Mixin, function আর @extend

Mixin — নামকরা declaration-এর গুচ্ছ

একই পাঁচ লাইন বারবার কপি না করে সেগুলোকে একটি নাম দিন — @mixin দিয়ে। তারপর যেখানে লাগবে, @include দিয়ে বসান। Mixin argument-ও নিতে পারে, তাই প্রতিবার একটু আলাদা ফল দেয়। আর @content দিয়ে সে বাইরে থেকে একটি পুরো ব্লক নিতে পারে — breakpoint-এর জন্য খুব জনপ্রিয় কৌশল:

@mixin button($bg, $fg: white) {
  background: $bg;
  color: $fg;
  border-radius: 8px;
}
@mixin from($bp) {
  @media (width >= $bp) { @content; }
}

.btn-buy { @include button(#0f766e); }
.btn-cancel {
  @include button(#e2e8f0, #0f172a);
}
.grid {
  @include from(40rem) {
    grid-template-columns: 1fr 1fr;
  }
}

.btn-buy {
  background: #0f766e;
  color: white;
  border-radius: 8px;
}
.btn-cancel {
  background: #e2e8f0;
  color: #0f172a;
  border-radius: 8px;
}
@media (width >= 40rem) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

লক্ষ করুন, mixin আউটপুটে declaration কপি করে বসায় — border-radius: 8px দুবার এসেছে। শুনতে অপচয় মনে হলেও বাস্তবে সমস্যা কম, কারণ সার্ভার ফাইল gzip বা Brotli দিয়ে সংকুচিত করে পাঠায়, আর পুনরাবৃত্ত লেখা খুব ভালো সংকুচিত হয়। @media (width >= $bp) লাইনটিও খেয়াল করুন — media query-র শর্তে CSS custom property চলে না, কিন্তু Sass variable চলে, কারণ compile-এর পর সেখানে সাধারণ 40rem বসে যায়।

Function — হিসাব করে মান ফেরত

Mixin দেয় declaration; function দেয় একটি মান। Sass-এর নিজের function এখন module-এ ভাগ করা: sass:math, sass:color, sass:map, sass:string. আগে সরাসরি darken($c, 10%) বা map-get() লেখা হতো; Dart Sass 1.80 থেকে এসব global function deprecated, এখন লিখতে হয় color.adjust(), map.get(). ভাগ করার জন্য / চিহ্নও deprecated (CSS-এ / অন্য অর্থে আছে, যেমন grid-area: 1 / 3); তার বদলে math.div():

@use "sass:math";
@use "sass:color";

@function rem($px) {
  @return math.div($px, 16px) * 1rem;   // 24px → 1.5rem
}

.grid  { gap: rem(24px); }               // gap: 1.5rem;
.third { width: math.div(100%, 3); }     // width: 33.3333333333%;
.btn:hover {
  background: color.adjust(#0f766e, $lightness: -8%);
}

শেষ লাইনের ফল একটু চমকে দেওয়ার মতো। এখনকার Dart Sass রঙের হিসাব দশমিক পর্যন্ত নির্ভুল রাখে, তাই আউটপুটে hex কোড নয়, আসে rgb(4.077841663%, 32.0790210821%, 29.9041721952%) — সঠিক, কিন্তু পড়তে অস্বস্তিকর। আর রংটি চিরদিনের মতো স্থির; পরে --brand বদলালেও এই hover-রং বদলাবে না। অংশ ৭-এ দেখবেন, CSS-এর নিজের color-mix() এই কাজ ব্রাউজারেই, জীবন্তভাবে করে।

@extend — কেন এখন সাবধানে

@extend একটি selector-কে অন্য selector-এর সব নিয়মে জুড়ে দেয়। শুনতে সুন্দর — declaration কপি হয় না, selector-তালিকায় নাম যোগ হয়। কিন্তু “সব নিয়ম” মানে সত্যিই সব, ফাইলের অন্য কোণের নিয়মও। একটি পেমেন্ট পাতার উদাহরণ — SCSS-এ লেখা ছিল:

.error { color: #b91c1c; border-left: 4px solid; padding-left: .5rem; }
.sidebar .error { font-size: .8rem; }      // অন্য কেউ, অন্য সময়ে লিখেছিলেন
.payment-failed { @extend .error; font-weight: bold; }

Sass এর থেকে যে CSS বানায়, সেটিই নিচের এডিটরে:

/* Sass-এর তৈরি CSS (@extend থেকে) */
.error, .payment-failed {
  color: #b91c1c;
  border-left: 4px solid;
  padding-left: 0.5rem;
}
.sidebar .error, .sidebar .payment-failed {
  font-size: 0.8rem;
}
.payment-failed {
  font-weight: bold;
}

.page { font-family: sans-serif; display: grid; gap: 1rem; }
.sidebar { background: #f1f5f9; padding: .5rem; }

আরও দুটি সীমা আছে: @media-এর ভেতর থেকে বাইরের selector extend করা যায় না (Sass error দেয়: You may not @extend selectors across media queries), আর তৈরি selector কোথায় বসবে, তা আপনার লেখার ক্রমে নয়, মূল নিয়মের জায়গায় — ফলে cascade-এর ক্রম গুলিয়ে যায়। একান্তই ব্যবহার করলে placeholder selector (%message) extend করুন, যা নিজে কখনো আউটপুটে আসে না, তাই অন্য কোণের নিয়মে জড়ায় না। তবে বেশিরভাগ পেশাদার দল এখন সরল নিয়ম মানে: পুনর্ব্যবহারের জন্য mixin বা একটি সাধারণ class, @extend নয়।

৬ · Loop, শর্ত আর map — utility class কারখানা

এখানেই Sass এখনো সবচেয়ে শক্তিশালী — এমন কাজ, যা CSS-এর নিজের নেই। Control directive দিয়ে compile-এর সময় শর্ত আর loop চালানো যায়: @if/@else, @each (তালিকা বা map ঘুরে), @for (সংখ্যা গুনে)। আর map হলো নাম-মানের জোড়া — (ok: green, err: red). দুটো মিলিয়ে কয়েক লাইনে ডজনখানেক utility class তৈরি করা যায়; selector-এর নামের ভেতরে মান বসানো হয় interpolation #{…} দিয়ে।

নিচের ডায়াগ্রামে Sass একটি ফাইল পড়তে পড়তে কী মনে রাখে আর কী লেখে, লাইন ধরে ধরে দেখুন:

1@use "sass:math";2@use "sass:color";3$brand: #0f766e;4$space: 16px;5$status: (ok: #15803d, err: #b91c1c);6.btn {7  padding: math.div($space, 2) $space;8  background: $brand;9  &:hover {10    background: color.adjust($brand, $lightness: -8%);11  }12}13@each $name, $c in $status {14  .text-#{$name} { color: $c; }15}

আরেকটু বড় কারখানা: তিনটি অবস্থার রং দিয়ে লেখা আর হালকা পটভূমির class, আর @for দিয়ে ফাঁকের মাপ:

@use "sass:color";
$colors: (ok: #15803d, warn: #b45309, err: #b91c1c);

@each $name, $c in $colors {
  .text-#{$name} { color: $c; }
  .bg-#{$name}   { background: color.change($c, $alpha: 0.12); }
}
@for $i from 1 through 3 {           // through = ৩ সহ; to = ৩ বাদে
  .mt-#{$i} { margin-top: $i * .5rem; }
}

এর তৈরি CSS (একটু গুছিয়ে, প্রতি নিয়ম এক লাইনে) নিচের এডিটরে, আর HTML-এ একটি অনলাইন দোকানের অর্ডারের অবস্থা:

/* Sass-এর তৈরি — ৯টি class, SCSS-এ লেগেছিল ৯ লাইন */
.text-ok { color: #15803d; }
.bg-ok { background: rgba(21, 128, 61, 0.12); }
.text-warn { color: #b45309; }
.bg-warn { background: rgba(180, 83, 9, 0.12); }
.text-err { color: #b91c1c; }
.bg-err { background: rgba(185, 28, 28, 0.12); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }

.orders { list-style: none; padding: 0; font-family: sans-serif; }
.orders li { padding: .5rem .75rem; border-radius: 6px; }

৭ · আধুনিক CSS কতটা জায়গা নিয়েছে — Sass আর কখন

২০১৫ সালের দিকে Sass ছাড়া বড় প্রজেক্ট কল্পনাই করা যেত না। তারপর CSS নিজেই একে একে Sass-এর জনপ্রিয় feature-গুলো এনেছে — ওয়েবের মানক তৈরিতে একে বলে “গরুর হাঁটা পথ পাকা করা” (paving the cowpaths): মানুষ যে পথে বারবার হাঁটে, সেটিকেই রাস্তা বানানো।

একই অফার-কার্ড এবার কোনো build ছাড়া, শুধু আধুনিক CSS দিয়ে — variable, nesting, calc() আর color-mix() সবই ব্রাউজারে:

.offer {
  --brand: #0f766e;
  --space: 1rem;
  font-family: sans-serif;
  max-width: 22rem;
  padding: var(--space);
  border: 2px solid var(--brand);
  border-radius: 10px;

  .offer-btn {
    background: var(--brand);
    color: white;
    border: 0;
    padding: calc(var(--space) / 2) var(--space);
    border-radius: 10px;
    &:hover { background: color-mix(in oklch, var(--brand), black 25%); }
  }
}

তাহলে Sass কখন এখনো ঠিক পছন্দ?

• Loop আর map দিয়ে অনেক class বা token তৈরি: একটি design system-এর রং-সারণি থেকে শত শত utility — CSS-এ এর কোনো বিকল্প নেই।
• Mixin দিয়ে জটিল, argument-ওয়ালা প্যাটার্ন: native mixin এখনো Baseline নয়।
• Compile-এর সময়ের নিরাপত্তা: ভুল variable নাম, ভুল একক (16px + 2s) — Sass error দিয়ে build থামায়; ব্রাউজার নীরবে উপেক্ষা করে।
• Media query-র শর্তে নামকরা breakpoint: @media (width >= $bp-md).
• বড় পুরোনো প্রজেক্ট আর library: Bootstrap 5-এর মূল কোড Sass-এ লেখা; তার রং বা breakpoint বদলাতে Sass-ই সবচেয়ে পরিষ্কার পথ (পর্ব ৫১)।

আর ছোট সাইট, ল্যান্ডিং পাতা বা নতুন প্রজেক্টে? আধুনিক CSS-ই প্রায়ই যথেষ্ট — একটি টুল কম মানে শেখার, সেটআপের আর ভাঙার জিনিস কম।

৮ · PostCSS — plugin দিয়ে CSS বদলানোর যন্ত্র

PostCSS নিজে প্রায় কিছুই করে না — এটাই তার শক্তি। সে CSS ফাইলকে পড়ে একটি গাছের মতো কাঠামোয় ভাঙে, যাকে বলে AST: প্রতিটি নিয়ম একটি শাখা, তার ভেতরে selector আর প্রতিটি declaration আলাদা পাতা। তারপর আপনার বেছে নেওয়া plugin-গুলো একে একে সেই গাছ বদলায়, আর শেষে PostCSS গাছটিকে আবার লেখায় ফেরায়। ২০১৩ সালে Andrey Sitnik প্রথমে Autoprefixer বানান; তার ভেতরের CSS-পড়ার অংশটিই পরে আলাদা হয়ে হয় PostCSS.

সবচেয়ে প্রচলিত plugin:

• Autoprefixer: আপনি লেখেন সাধারণ user-select: none; সে Can I use-এর তথ্য দেখে শুধু যেখানে দরকার সেখানে -webkit- জাতীয় vendor prefix যোগ করে, আর অপ্রয়োজনীয় পুরোনো prefix মুছে দেয়। হাতে prefix লেখার আর দরকার নেই।
• Browserslist: কোন ব্রাউজার সমর্থন করবেন, তা এক লাইনে — যেমন defaults (মোটামুটি “০.৫%-এর বেশি ব্যবহার, প্রতিটির শেষ দুই সংস্করণ, Firefox ESR, আর বন্ধ হয়ে যায়নি এমন”)। সাম্প্রতিক সংস্করণে baseline widely available-এর মতো Baseline-ভিত্তিক query-ও আছে। Autoprefixer, postcss-preset-env, Lightning CSS — সবাই এই একই তালিকা পড়ে।
• postcss-preset-env: অনেকগুলো plugin-এর প্যাকেট, যা নতুন CSS (যেমন nesting) আপনার লক্ষ্য-ব্রাউজার অনুযায়ী পুরোনো রূপে নামিয়ে আনে; ভেতরে Autoprefixer-ও থাকে, তাই দুটো একসাথে আলাদা করে দিতে হয় না।
• cssnano: minification — ফাঁকা জায়গা, মন্তব্য, বাড়তি অক্ষর বাদ দিয়ে ফাইল ছোট করে, অর্থ না বদলে।

নিচের ডায়াগ্রামে একটি ছোট CSS তিনটি plugin পার হয়ে কীভাবে বদলায়, ধাপে ধাপে দেখুন (আউটপুটগুলো আসল টুল চালিয়ে নেওয়া, browserslist defaults):

.hero {
  user-select: none;
  backdrop-filter: blur(4px);
  &:hover { opacity: .9; }
}

Root
└─ Rule  .hero
   ├─ Decl  user-select : none
   ├─ Decl  backdrop-filter : blur(4px)
   └─ Rule  &:hover
      └─ Decl  opacity : .9

.hero {
  user-select: none;
  backdrop-filter: blur(4px);
}
.hero:hover { opacity: .9; }

.hero {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  backdrop-filter: blur(4px);
}
.hero:hover { opacity: .9; }

.hero{-webkit-user-select:none;-moz-user-select:none;user-select:none;backdrop-filter:blur(4px)}.hero:hover{opacity:.9}

Tailwind আর Lightning CSS — কে কার আত্মীয়

• Tailwind CSS: সংস্করণ ৩ পর্যন্ত Tailwind ছিল মূলত একটি PostCSS plugin — আপনার HTML খুঁজে যে class ব্যবহার হয়েছে, শুধু সেগুলোর CSS বানাত। সংস্করণ ৪ (২০২৫) নিজের দ্রুত engine-এ চলে আর ভেতরে prefix ও syntax-রূপান্তরের জন্য Lightning CSS ব্যবহার করে; PostCSS দিয়ে চালানোর একটি plugin এখনো দেয়। বিস্তারিত পর্ব ৫১-এ।
• Lightning CSS: Parcel bundler-এর নির্মাতা Devon Govett-এর বানানো, Rust ভাষায় লেখা টুল। একাই parse, browserslist অনুযায়ী prefix, nesting-এর মতো নতুন syntax নামানো আর minify করতে পারে, আর JavaScript-এ লেখা টুলের চেয়ে সাধারণত অনেক দ্রুত। অর্থাৎ Autoprefixer + preset-env + cssnano-র কাজ এক টুলে। তবে PostCSS-এর বিশাল plugin-জগতের সব কিছু এতে নেই — বিশেষ কোনো plugin লাগলে PostCSS-ই ভরসা। Vite-এর মতো build টুলে এটি বিকল্প হিসেবে বেছে নেওয়া যায়।

৯ · সেটআপ — npm, script, VS Code আর source map

Sass আর PostCSS দুটিই npm দিয়ে আসে, তাই আগে Node.js ইনস্টল করুন (JavaScript কোর্সের npm আর Vite-এর পর্বে বিস্তারিত)। তারপর প্রজেক্ট ফোল্ডারে terminal খুলে:

npm init -y                                  # package.json তৈরি
npm install --save-dev sass                  # Dart Sass
npm install --save-dev postcss postcss-cli autoprefixer cssnano

এবার package.json-এর "scripts" অংশে কমান্ডগুলোর নাম দিন, যাতে প্রতিবার লম্বা কমান্ড মনে রাখতে না হয়:

{
  "scripts": {
    "dev": "sass src/main.scss dist/main.css --watch",
    "build:css": "sass src/main.scss dist/main.css --style=compressed",
    "build": "npm run build:css && postcss dist/main.css -o dist/main.min.css"
  },
  "browserslist": ["defaults"]
}

module.exports = {
  plugins: [require('autoprefixer'), require('cssnano')]
};

• npm run dev — watch mode: Sass চালু থেকে নজর রাখে; .scss সেভ করলেই নতুন main.css. VS Code-এর Live Server-এর মতো live reload থাকলে পাতাও নিজে থেকে নতুন হয়।
• npm run build — প্রকাশের আগে: compressed CSS, তারপর PostCSS-এর prefix আর minify. HTML-এ <link rel="stylesheet" href="dist/main.min.css">.
• "browserslist" — একবার লিখলে সব টুল একই তালিকা মানে। npx browserslist চালালে দেখায় তালিকায় ঠিক কোন কোন ব্রাউজার পড়েছে।

FTP বা cPanel দিয়ে সাইট তোলেন? তাহলে সার্ভারে শুধু dist/-এর CSS ফাইল তুলুন; src/-এর .scss আর node_modules ফোল্ডার সার্ভারে লাগে না। Vite বা অন্য bundler ব্যবহার করলে কাজ আরও কম — sass প্যাকেজ ইনস্টল থাকলেই সে .scss ফাইল নিজে compile করে, আর postcss.config.js থাকলে নিজে থেকে PostCSS চালায়।

VS Code আর source map

VS Code নিজেই SCSS কোড রঙিন করে দেখায় আর কিছু ভুল ধরিয়ে দেয়। Marketplace-এ “Live Sass Compiler”-এর মতো extension আছে, যা সেভ করলেই compile করে — শুরুতে সুবিধাজনক, তবে এর ভেতরে Sass-এর নিজস্ব একটি সংস্করণ থাকে, যা আপনার প্রজেক্টের সংস্করণের সাথে না-ও মিলতে পারে। দলের কাজে npm script-ই ভালো: সবার কম্পিউটারে একই সংস্করণ, একই ফল।

Compile করা CSS-এ সমস্যা হলে DevTools দেখায় main.css-এর লাইন ১৪৭ — কিন্তু আপনি তো লিখেছেন _buttons.scss! সমাধান source map. ফাইলে লেখার সময় Dart Sass ডিফল্টভাবে main.css.map বানায় আর CSS-এর শেষে একটি মন্তব্য রাখে:

/*# sourceMappingURL=main.css.map */

DevTools এই মন্তব্য দেখে map ফাইলটি পড়ে, আর Styles প্যানেলে সরাসরি দেখায় _buttons.scss:12 (পর্ব ৪৭)। প্রকাশের সময় map সার্ভারে রাখবেন কি না, সেটি আপনার সিদ্ধান্ত — রাখলে যে কেউ আপনার মূল SCSS দেখতে পারবে; না চাইলে --no-source-map.

১০ · AI-এর যুগে — পুরোনো Sass চিনে ফেলার চোখ

AI-কে “একটি SCSS ফাইল লিখে দাও” বললে সে দ্রুত সুন্দর কোড দেয়। কিন্তু তার শেখার ডেটার বড় অংশ ২০১০-এর দশকের — যখন @import, darken() আর হাতে লেখা prefix-ই ছিল নিয়ম। ফলে কয়েকটি ভুল বারবার আসে:

AI-এর দেওয়া SCSS/PostCSS হাতে পেলে — যাচাইয়ের চেকলিস্ট

• নিজে npx sass দিয়ে compile করেছি, আর terminal-এ একটিও deprecation warning নেই
• তৈরি CSS নিজের চোখে পড়েছি — অপ্রত্যাশিত selector, অপ্রয়োজনীয় হাজার class বা অদ্ভুত লম্বা selector নেই
• তৈরি CSS-কে W3C CSS Validator-এ দিয়েছি; HTML-কে validator.w3.org-এ
• নতুন feature-এর ব্রাউজার সমর্থন MDN আর Can I use-এ মিলিয়েছি; prefix-এর সিদ্ধান্ত Autoprefixer-কে দিয়েছি
• DevTools-এ source map দিয়ে নিয়মগুলোর উৎস দেখেছি, আর Lighthouse-এ CSS-এর আকার ও render-blocking যাচাই করেছি