🏠 Home / Hub 🏠 Back to Hub

💅 SCSS / Sass

CSS Preprocessor — CSS ကို superpower ပေး | Variables, Nesting, Mixins

01

Variables & Basics

$variable, compile process, SCSS vs CSS
02

Nesting

Parent-child rules, & selector, BEM with SCSS
03

Mixins & Include

Reusable code blocks, parameters, default values
04

Functions & Operations

Math operations, built-in functions, color functions
05

@extend & Placeholder

Code reuse, % placeholder selectors, inheritance
06

Partials & @use

File splitting, _partial.scss, @use, @forward
07

Control Flow

@if/@else, @each over list/map, @for, @while, built-in modules (sass:math, sass:color)
Prerequisites: CSS အခြေခံ သိဖို့ လိုတယ် (css_01 - css_10 ကို ဦးစွာ သင်ပါ)
Tool: Node.js install ပြီး npm install -g sass → sass input.scss output.css
VS Code: "Live Sass Compiler" extension = auto compile, browser auto-refresh

⚡ SCSS Quick Reference

// Variable
$primary: #e040fb;
$padding: 16px;

// Nesting
.nav {
  background: $primary;
  &__item { padding: $padding; }   // BEM
  &:hover { opacity: 0.8; }        // pseudo
}

// Mixin
@mixin flex-center($dir: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $dir;
}
.hero { @include flex-center(column); }

// @extend
%btn-base { padding: 10px 20px; border-radius: 6px; }
.btn-primary { @extend %btn-base; background: $primary; }
.btn-outline  { @extend %btn-base; border: 2px solid $primary; }

📌 Study Checklist