CSS Preprocessor (Sass) with video example in Khmer

Hello everyone! Today we learn about CSS Preprocessor — specifically Sass (Syntactically Awesome Stylesheets). If you write CSS every day and feel like you repeat same thing many time, Sass will save your life! Let get start!

What is CSS Preprocessor?

CSS Preprocessor is a tool that extend normal CSS. It let you write CSS with extra feature like variable, nesting, mixin, and more. Then it compile (convert) your code into normal CSS that browser can understand.

Think of it like this: you write Sass code → preprocessor convert it → browser get normal CSS. Easy!

💡 Tip: Browser cannot read Sass directly! You always need to compile .scss file into .css file before use in website.

Why Use Sass?

Here some reason why developer love Sass:

Variables — save color, font size, spacing in one place. change once, update everywhere!
Nesting — write CSS inside CSS, follow HTML structure. much cleaner!
Mixins — create reusable piece of code, like function in programming
Partials & Import — split big CSS file into small file, easier to manage
Math operation — can do calculation inside CSS like width: 100% / 3

💡 Tip: If you work on big project with many page and many style, Sass is almost must have. Small project with few style? Normal CSS is fine too!

1. Sass Variables

In normal CSS, you type same color value many many time. With Sass, you save it in variable one time!

// file: style.scss

$primary-color: #4CAF50;
$secondary-color: #FF5722;
$padding: 20px;
$font-stack: 'Segoe UI', sans-serif;

body {
  font-family: $font-stack;
  color: #333;
}

.button {
  background-color: $primary-color;
  padding: $padding;
  color: white;
  border: none;
  border-radius: 8px;
}

.button-danger {
  background-color: $secondary-color;
  padding: $padding;
}

💡 Tip: Variable name in Sass start with $ sign. Name should be descriptive like $primary-color not $c1. Future you will thank present you!

2. Nesting

In normal CSS, you write parent and child selector separate. In Sass, you can nest child inside parent — follow the HTML structure!

// Normal CSS way (messy when many level)
.navbar { background: #333; }
.navbar ul { list-style: none; }
.navbar ul li { display: inline-block; }
.navbar ul li a { color: white; text-decoration: none; }

// Sass way (clean and organized!)
.navbar {
  background: #333;

  ul {
    list-style: none;

    li {
      display: inline-block;

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

        &:hover {
          color: #4CAF50;
        }
      }
    }
  }
}

💡 Tip: & symbol mean "parent selector". So &:hover inside .navbar a become .navbar a:hover. Very useful for pseudo-class and modifier!

3. The `&` (Parent Selector) in Detail

The & is one of the most powerful thing in Sass. Look at this example:

.box {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  margin: 20px;

  // &.secondary = .box.secondary (same element with two class)
  &.secondary {
    background-color: #FF5722;
  }

  // &:hover = .box:hover
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  // &--large = .box--large (BEM naming convention)
  &--large {
    padding: 40px;
    font-size: 1.5rem;
  }
}

💡 Tip: &.secondary (no space) mean same element have both class. & .secondary (with space) mean child element with class .secondary. Very different! Be careful!

4. Mixins (Reusable Code)

Mixin is like function in programming. You define it once, then use it anywhere!

// Define mixin
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Mixin with parameter
@mixin button-style($bg-color, $text-color: white) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease;

  &:hover {
    opacity: 0.85;
  }
}

// Use mixin with @include
.hero {
  @include flex-center;
  min-height: 100vh;
}

.btn-primary {
  @include button-style(#4CAF50);
}

.btn-danger {
  @include button-style(#FF5722, #fff);
}

💡 Tip: $text-color: white is default value. If you not pass second argument, it use white. Same concept as default parameter in JavaScript function!

5. Partials and Import

When your CSS file become very long (500+ line), it hard to find thing. Sass let you split into small file!

styles/
├── _variables.scss    ← start with underscore = partial file
├── _mixins.scss
├── _navbar.scss
├── _footer.scss
└── main.scss          ← main file that import everything

// main.scss — import all partial file
@use 'variables';
@use 'mixins';
@use 'navbar';
@use 'footer';

💡 Tip: File name start with _ (underscore) tell Sass "this is partial, don't compile this file alone". Only the main file get compiled!

6. How to Install and Use Sass

You need Node.js installed first, then:

# Install Sass globally
npm install -g sass

# Compile one time
sass style.scss style.css

# Watch mode — auto compile when you save file
sass --watch style.scss:style.css

# Watch entire folder
sass --watch scss/:css/

💡 Tip: Use --watch mode during development! Every time you save your .scss file, it auto compile to .css. No need run command again and again!

Video Tutorial

Watch this video tutorial in Khmer language for step-by-step guide on CSS Preprocessor Sass:

Quick Summary

Feature	Normal CSS	Sass
Variables	`var(--color)` (CSS custom property)	`$color` (compile-time)
Nesting	❌ Not supported	✅ Supported
Mixins	❌ Not supported	✅ `@mixin` + `@include`
Partials	❌ Not supported	✅ `_filename.scss`
Math	`calc()` only	`+`, `-`, `*`, `/` directly
File extension	`.css`	`.scss` or `.sass`

💡 Tip: Modern CSS now have var() for variable and native nesting support in newest browser. But Sass still useful for mixin, partial, and complex project where you need compile-time feature!

That all for today! Sass is very powerful tool that make your CSS life much easier. Start with variable and nesting first — when you comfortable, try mixin and partial. Practice and you will love it! 🎉