💅 SCSS Lesson 06 — Partials & @use

1. Partials — File ခွဲခြားနည်း

// Project folder structure
scss/
├── _variables.scss    // colors, fonts, spacing
├── _mixins.scss       // reusable mixins
├── _base.scss         // reset, html, body
├── _typography.scss   // headings, paragraphs
├── _buttons.scss      // button styles
├── _forms.scss        // input, label, select
├── _nav.scss          // navigation
├── _cards.scss        // card components
├── _grid.scss         // layout grid
└── main.scss          // imports everything → compiles to main.css

2. @use (Modern) vs @import (Old)

// ❌ OLD way — @import (deprecated since Sass 1.23)
@import 'variables';
@import 'mixins';
// Problem: everything global, slow, pollutes namespace

// ✅ NEW way — @use
// main.scss
@use 'variables' as v;
@use 'mixins' as m;
@use 'base';         // no alias = use base.varName
@use 'components/buttons';
@use 'components/forms';

// Usage with namespace
.hero {
  color: v.$primary;
  @include m.flex-center();
}

// _variables.scss
$primary:    #e040fb;
$secondary:  #7b1fa2;
$font-stack: 'Arial', sans-serif;
$spacing:    8px;

// _mixins.scss
@use 'sass:math';

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

@mixin respond-to($size) {
  @if $size == mobile  { @media (max-width: 576px)  { @content; } }
  @if $size == tablet  { @media (max-width: 768px)  { @content; } }
  @if $size == desktop { @media (max-width: 1024px) { @content; } }
}

3. @forward — Library Pattern

// _index.scss — re-export all partials (library entry point)
@forward 'variables';
@forward 'mixins';
@forward 'functions';

// Then in your component files:
@use '../styles' as s;  // gets all forwards

.button {
  background: s.$primary;
  @include s.flex-center();
}

4. Real Project: Complete SCSS Architecture

// main.scss — entry point (ဒါပဲ compile လုပ်)
@use 'abstracts/variables' as *;   // * = no namespace needed
@use 'abstracts/mixins' as *;
@use 'abstracts/functions' as *;

@use 'base/reset';
@use 'base/typography';
@use 'base/utilities';

@use 'components/buttons';
@use 'components/forms';
@use 'components/cards';
@use 'components/modals';

@use 'layout/navbar';
@use 'layout/footer';
@use 'layout/grid';

@use 'pages/home';
@use 'pages/about';
@use 'pages/contact';

// _reset.scss
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: $font-stack; color: $text; }
img  { max-width: 100%; height: auto; }

// _utilities.scss
.text-center { text-align: center; }
.d-flex      { display: flex; }
.d-none      { display: none; }
@for $i from 1 through 5 {
  .mt-#{$i} { margin-top:    $i * 8px; }
  .mb-#{$i} { margin-bottom: $i * 8px; }
  .p-#{$i}  { padding:       $i * 8px; }
}