💅 SCSS Lesson 01 — Variables & Basics

1. SCSS ဆိုတာ ဘာလဲ

/* Plain CSS */
:root {
  --primary: #e040fb;
  --padding: 16px;
}
.button {
  background: var(--primary);
  padding: var(--padding);
  border-radius: 6px;
}
.button:hover {
  background: #c000d0;
}

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

.button {
  background: $primary;
  padding: $padding;
  border-radius: 6px;

  &:hover {
    background: darken($primary, 15%);
  }
}

2. Variables — $variable_name

// Colors
$primary:    #e040fb;
$secondary:  #7b1fa2;
$success:    #28a745;
$danger:     #dc3545;
$text:       #333333;
$white:      #ffffff;

// Spacing
$padding-sm:  8px;
$padding-md:  16px;
$padding-lg:  24px;
$gap:         20px;

// Typography
$font-base:   'Arial', sans-serif;
$font-size:   16px;
$line-height: 1.6;

// Breakpoints
$mobile:  576px;
$tablet:  768px;
$desktop: 1200px;

// Usage
.card {
  padding: $padding-md;
  font-family: $font-base;
  color: $text;
}

3. Variable Scope

$color: red;   // global variable

.parent {
  $color: blue;   // local variable (overrides inside)
  color: $color;  // blue

  .child {
    color: $color;  // also blue (inherits from parent block)
  }
}

.other {
  color: $color;  // red (back to global)
}

// !default — only set if not already defined
$primary: #e040fb !default;  // won't overwrite if $primary exists

4. SCSS Compile လုပ်နည်း

# 1. Install Sass (globally)
npm install -g sass

# 2. Single file compile
sass style.scss style.css

# 3. Watch mode (save တိုင်း auto compile)
sass --watch style.scss:style.css

# 4. Folder watch
sass --watch scss/:css/

# 5. Minified output (production)
sass --style=compressed style.scss style.min.css

5. SCSS vs CSS vs LESS vs Stylus