Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── Modern SASS project: abstracts/_index.scss (barrel) ───────────────────────

@forward 'variables';
@forward 'functions';
@forward 'mixins';
@forward 'breakpoints' as bp-*;

// ── sass:meta for type checking and introspection ─────────────────────────────

@use 'sass:meta';
@use 'sass:list';

// Type-safe color function
@function ensure-color($value, $name: 'value') {
    @if meta.type-of($value) != 'color' {
        @error "#{$name} must be a color, got #{meta.type-of($value)}: #{meta.inspect($value)}.";
    }
    @return $value;
}

// Function passed as a first-class argument
@function apply($fn, $value) {
    @return meta.call($fn, $value);
}

$double: meta.get-function('str-length', $module: 'sass:string');

// ── @error / @warn / @debug ───────────────────────────────────────────────────

@mixin grid($columns) {
    @if meta.type-of($columns) != 'number' or not math.is-unitless($columns) {
        @error "grid() expects a unitless number, got `#{$columns}`.";
    }
    @if $columns > 24 {
        @warn "#{$columns} columns is unusually large; consider 12 or fewer.";
    }
    @debug "Generating #{$columns}-column grid";  // only shown in dev mode

display              : grid;
    grid-template-columns: repeat($columns, 1fr);
}

// ── Namespace aliasing for readability ────────────────────────────────────────

@use 'sass:color'  as c;
@use 'sass:math'   as m;
@use 'abstracts'   as a;

.hero {
    background: c.scale(a.$color-primary, $lightness: -10%);
    font-size : m.div(36px, 16px) * 1rem;  // 2.25rem
    padding   : a.$space-xl a.$space-lg;
    max-width : 80ch;
    margin    : 0 auto;
}