Sass Addon

Optional Sass functions and mixins for when you need more than utility classes. Independent from the core — you don't need it to use Dopamine classes.

Setup

Option 1: Import the addon directly

@use 'dopamine-fluid/addons/sass/dopamine-functions' as df;

Option 2: Use the auto-generated file

When you output to .scss, Dopamine generates _dopamine-functions.scss alongside the utility classes with your config's viewport defaults and breakpoints:

dopamine ./templates --ext twig --out ./scss/_dopamine.scss
# Creates: _dopamine.scss + _dopamine-functions.scss
@use 'dopamine-functions' as df;

df.fluid()

The same fluid clamp() math as Dopamine's utility classes — for use in custom SCSS where you can't add classes to the HTML (e.g. Drupal-rendered content).

Signature

@function fluid($min, $max, $vpMin: 320, $vpMax: 1440)

// $min    — minimum value in pixels
// $max    — maximum value in pixels
// $vpMin  — viewport min (default from config)
// $vpMax  — viewport max (default from config)
// Returns — clamp(minRem, calc(Xvw + Yrem), maxRem)

Basic usage

@use 'dopamine-functions' as df;

h1 { font-size: df.fluid(32, 72); }
p  { font-size: df.fluid(16, 20); }
.hero { padding: df.fluid(24, 80); }

Custom viewport override

// Scale between 480px and 1920px instead of default
.hero-title {
  font-size: df.fluid(32, 96, 480, 1920);
}

Drupal theme example

@use 'dopamine-functions' as df;

// CKEditor content — can't add classes
.text-formatted {
  h2 { font-size: df.fluid(24, 48); margin-bottom: df.fluid(16, 32); }
  h3 { font-size: df.fluid(20, 32); margin-bottom: df.fluid(12, 24); }
  p  { font-size: df.fluid(16, 20); margin-bottom: df.fluid(8, 16); }
  ul, ol { padding-left: df.fluid(16, 32); }
}

Breakpoint Mixins

Mobile-first and desktop-first breakpoint mixins. Values are generated from your dopamine.config.json breakpoints so they always stay in sync.

Available breakpoints

sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px, ...

breakpoint-up($name)

Applies styles at a minimum viewport width (mobile-first):

@use 'dopamine-functions' as df;

.sidebar {
  display: none;

  @include df.breakpoint-up(lg) {
    display: block;    // visible at 992px+
  }
}

breakpoint-down($name)

Applies styles below a viewport width (desktop-first):

@use 'dopamine-functions' as df;

.mobile-banner {
  @include df.breakpoint-down(md) {
    display: block;    // visible below 768px
  }
}

When to use what

Classes only

You control the HTML. Scan templates, generate CSS. No Sass needed.

Classes + df.fluid()

Classes in HTML for most things. df.fluid() for elements you can't add classes to.

Classes + Mixins

Classes in HTML. Breakpoint mixins in custom SCSS for responsive logic.

GitHub