Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── Typical partial-based project structure ───────────────────────────────────

// scss/
// ├── main.scss              ← entry point, imports everything
// ├── _variables.scss        ← design tokens
// ├── _functions.scss        ← custom functions
// ├── _mixins.scss           ← reusable mixins
// ├── _reset.scss            ← CSS reset / normalize
// ├── _typography.scss       ← type scale, headings, body
// ├── _layout.scss           ← grid, containers
// └── components/
//     ├── _buttons.scss
//     ├── _forms.scss
//     └── _cards.scss

// ── main.scss ─────────────────────────────────────────────────────────────────

// Load abstracts first (they emit no CSS on their own)
@use 'variables';
@use 'functions';
@use 'mixins';

// Base layers
@use 'reset';
@use 'typography';
@use 'layout';

// Components (order affects cascade for equal-specificity rules)
@use 'components/buttons';
@use 'components/forms';
@use 'components/cards';

// ── _typography.scss ─────────────────────────────────────────────────────────

@use 'variables' as v;   // access as v.$font-size-base, v.$color-dark, etc.

body {
    font-family : v.$font-family-base;
    font-size   : v.$font-size-base;
    color       : v.$color-dark;
    line-height : v.$line-height-base;
}

h1, h2, h3, h4, h5, h6 {
    font-weight  : 700;
    line-height  : 1.2;
    margin-bottom: 0.5em;
}