SCSS Mixins and Functions

SCSS Mixins and Functions

Everything is available through one module:

@use 'srl';

Each module is forwarded with a prefix: srl.system-*, srl.grid-*, srl.colors-*, srl.typography-*, srl.spacer-*, srl.helpers-*, srl.fonts-*, srl.button-*. meta is forwarded without a prefix. The placeholders from src/assets/scss/placeholders/ are loaded through srl as well (see SCSS Placeholders).

Font Awesome is a separate module: @use 'srl/fa';.

---

system

API	Description
srl.$system-build	Current target: app, editor, pdf, word, xbrl
srl.$system-environment	development or production
srl.system-size-unit($px, $unit: false)	Converts a unitless px value to the build unit (rem, or pt in Word). Values with a unit are returned unchanged; false/null become unset. Optional target unit: rem, pt, px, in, cm, mm, pc, Q, em.
srl.system-add-root-style($name, $value, $breakpoint: false, $behavior: false)	Registers a CSS variable --$name on :root. With $breakpoint, the value applies only in that breakpoint. With $behavior up or down, it applies from or up to that breakpoint.
srl.system-root-style($name, $default: unset)	Reads a variable: var(--$name, $default). In Word builds it returns the resolved value.
srl.system-strip-unit($n), srl.system-round-if-unit($n), srl.system-map-get-next($map, $key)	Small helpers

// Responsive custom variable
@include srl.system-add-root-style(srl-header-height, srl.system-size-unit(64));
@include srl.system-add-root-style(srl-header-height, srl.system-size-unit(96), desktop, up);

.srl-header { height: srl.system-root-style(srl-header-height); }

// Target-specific styles
@if srl.$system-build == 'pdf' { … }

Prefer system-add-root-style over hard-coded media queries for values that change per breakpoint. It keeps Word output working, because Word gets the resolved value.

grid

Media queries

Mixin	Media query
srl.grid-media-up($bp)	from $bp upwards (no query for the base breakpoint)
srl.grid-media-down($bp)	up to the end of $bp
srl.grid-media($bp)	only within $bp; print → @media print
srl.grid-media-between($from, $to)	from start of $from to end of $to

.my-teaser {
  flex-direction: column;
  @include srl.grid-media-up(tablet-ls) { flex-direction: row; }
}

Layout

Mixin / function	Description
srl.grid-container()	max-width + inline padding from grid.containers
srl.grid-container-fluid()	Inline padding only
srl.grid-row()	CSS grid with the column count and gaps of the current breakpoint
srl.grid-col($span, $bp: false, $bp-end: false)	Spans $span columns, optionally only from $bp or within $bp–$bp-end. Default span: 4
srl.grid-offset($offset, $bp: false)	Starts the element after $offset columns
srl.grid-pdf-flex-col($span)	Width of $span print columns (PDF uses flex instead of CSS grid)
srl.grid-calculate-pdf-col-span-minus-one-gutter($span), …-plus-one-gutter($span), srl.grid-calculate-pdf-col-start($col)	PDF width/position calculations
srl.grid-get-container-max-width(), srl.grid-get-container-padding(), srl.grid-get-gutter-columns(), srl.grid-get-gutter-column-gap(), srl.grid-get-gutter-row-gap()	Current grid values as var(…)

.my-layout {
  @include srl.grid-container();
  @include srl.grid-row();

  &__main  { @include srl.grid-col(4); @include srl.grid-col(8, desktop); }
  &__aside { @include srl.grid-col(4); @include srl.grid-col(4, desktop); }
}

For the usual component widths, use the ready-made placeholders (%srl-regular-width, %srl-wide-width …) instead. They already handle PDF, Word and XBRL.

colors

API	Description
srl.colors-<name>()	Generated for each color, e.g. srl.colors-primary-1000()
srl.colors-get($name)	Same with the name as an argument (fails if the color does not exist)

typography

API	Description
@include srl.typography-<name>($margins: false)	Generated for each text style. Sets all font properties; with true also margin-top/-bottom
@include srl.typography-get($name, $margins: false)	Same with the name as an argument
srl.typography-get-font-size($name), -get-line-height, -get-font-family, -get-font-weight, -get-font-style, -get-font-color, -get-letter-spacing, -get-text-transform, -get-margin-top, -get-margin-bottom	Single values
@include srl.typography-set-font-size($name, $value) (and set-… for every property)	Overrides a property of the text style locally (sets the CSS variable)

.srl-quote {
  @include srl.typography-quote();

  &--small { @include srl.typography-set-font-size(quote, 18); }
}

spacer

API	Description
srl.spacer-get($n)	Spacing value $n as var(--srl-spacer-$n)
srl.spacer-margin($n), -margin-block, -margin-inline, -margin-top, -margin-right, -margin-bottom, -margin-left	Margin mixins
srl.spacer-padding($n), -padding-block, -padding-inline, -padding-top, -padding-right, -padding-bottom, -padding-left	Padding mixins
srl.spacer-gap($n), -row-gap, -column-gap	Gap mixins
srl.spacer-component-margin($group-or-map)	Spacing between neighbouring components, see Design Tokens#spacermarginsgroup--spacing-between-components

Outside Word, the margin and padding mixins write logical properties (margin-block-start …). In Word they write physical ones.

helpers

Mixin	Description
srl.helpers-trim-margins	No top margin on the first child, no bottom margin on the last child
srl.helpers-list-reset()	Removes list styling
srl.helpers-list-default($style: circle)	Default list styling
srl.helpers-clearfix	Clears floats
srl.helpers-editor-label($text)	Label in the top-left corner of a component in the Livingdocs editor
srl.helpers-editor-label-with-icon($text, $icon: grip-dots-vertical)	Editor label with a Font Awesome icon
srl.helpers-editor-label-icon($icon: grip-dots-vertical)	Round icon label that appears on hover

Use the editor labels in scss/editor.scss of a component, e.g. for containers that look empty in the editor:

.srl-pdf-pagebreak { @include srl.helpers-editor-label('PDF page break'); }

meta

Function	Description
srl.$meta	The complete meta map from srl.config.json
srl.get($path)	Value at a path, e.g. srl.get((table, border, regular, width)). Returns false if missing
srl.is($path)	true if the path exists

@use 'sass:map';
$border: map.get(srl.$meta, table, border, regular);

button

Mixin	Description
srl.button-switch($selector)	Applies the hover/focus/active colors of a button to $selector when the parent is hovered, focused or active (e.g. a whole teaser card controls its button)

Font Awesome (@use 'srl/fa')

Free or Pro is selected automatically by the Vite aliases fa-source / fa-font.

Mixin	Description
fa.base()	Base icon styles (font family, smoothing, line height …)
fa.icon($name)	Icon as ::before in the default style
fa.solid($name), fa.regular($name), fa.light($name), fa.thin($name), fa.brands($name)	Icon as ::before in a specific style (light/thin need Pro)
fa.content($name, $style: solid)	Sets only content (for your own ::before/::after)
fa.size($size)	Icon size

@use 'srl/fa';

.srl-download-link {
  @include fa.base();
  @include fa.solid(download);
}