YouTip

Sass Tutorial - Getting Started

📅 2026-06-12 | 📂 Sass

Sass Variables and Nesting

$primary: #3498db;
$font-stack: Arial, sans-serif;

nav {
    background: $primary;
    ul { list-style: none; }
    li { display: inline-block; }
    a {
        color: white;
        &:hover { color: darken($primary, 10%); }
    }
}

Mixins

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box { @include flex-center; }

Summary

Sass adds variables, nesting, and mixins to CSS
Compile .scss to .css