@dnb/eufemia/docs/uilib/helpers/sass.md

DNB Eufemia Design System UI Library

---
title: 'SASS mixins'
version: 11.0.0
generatedAt: 2026-04-21T13:57:53.909Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# SASS and mixins

All CSS helper classes are to be found in `src/style/core/helper-classes/helper-classes.scss`
Most helper classes are SCSS _mixins_ which are then applied to the class when invoked.

You can import Eufemia _mixins_ directly into your SCSS styles:

```scss
@use '@dnb/eufemia/style/core/utilities.scss' as utilities;

/** State handling */
@include utilities.hover {
}
@include utilities.focus {
}
@include utilities.active {
}

/** 
 * Media Queries and Breakpoints 
 * More info can be found in the sections below
 */
@include utilities.allBelow(large) {
}
@include utilities.allAbove(small) {
}
@include utilities.allBetween(small) {
}

/** Screen Reader Only */
@include utilities.srOnly() {
} // .dnb-sr-only

/** Browser Checks */
@include utilities.IS_CHROME {
}
@include utilities.IS_SAFARI_MOBILE {
}
@include utilities.IS_SAFARI_DESKTOP {
}

/** Eufemia DropShadow */
@include utilities.defaultDropShadow();

/** Eufemia Border helpers */
@include utilities.focusRing(
  /* $whatinput: 'keyboard', $color: var(--color-emerald-green), $inset: inset */
);
@include utilities.fakeBorder(
  /* $color: var(--color-emerald-green), $width: 0.0625rem, $inset: inset */
);

/** Scroll behavior */
@include utilities.scrollY(/* $mode: scroll */);
@include utilities.scrollX(/* $mode: scroll */);
@include utilities.hideScrollbar();
@include utilities.scrollbarAppearance();

/** Reset fieldset styles */
@include utilities.fieldsetReset();
```

## Media queries and Breakpoints

Use the `allAbove`, `allBelow` and `allBetween` mixins to add media queries to your CSS.

To prevent overlapping media queries, `0.00625em` gets added to the minimum width. This results in an increment of approximately `0.1px` when using `em` units. If you're using a unit other than `em`, you may need to adjust this value accordingly, as `0.00625px` is typically too small to effectively prevent overlaps.

| mixin                   | actual interval (em)   | actual interval (px) |
| ----------------------- | ---------------------- | -------------------- |
| `allBelow(40em)`        | 0 to 40em              | 0 to 640px           |
| `allBetween(40em,60em)` | 40.00625em to 60em     | 640.1px to 960px     |
| `allAbove(60em)`        | 60.00625em to infinity | 960.1px to infinity  |

```scss
@use '@dnb/eufemia/style/core/utilities.scss' as utilities;

@include utilities.allBelow(small) {
  // from 0px to 'small' (640px)
}

@include utilities.allBetween(small, medium) {
  // from 640.1px ('small' + 0.1px) to 960px ('medium')
}

@include utilities.allAbove(medium) {
  // from 960.1px ('medium' + 0.1px) and wider
}
```

`$breakpoints` is a key-value map containing all the available sizes for media queries

```scss
@use '@dnb/eufemia/style/core/utilities.scss' as utilities;

// getting a size from $breakpoints
div {
  max-width: map-get(utilities.$breakpoints, medium);
}
```

### Custom offset

You can either change the default value `$breakpoint-offset` (default: 0) from `utilities.scss`, or send in a custom offset to the mixin.

```scss
@use '@dnb/eufemia/style/core/utilities.scss' as utilities;

// Change the default offset (default: 0)
utilities.$breakpoint-offset: 10em;

// Will use the new default offset, adding 10em to the size
@include utilities.allBelow(large) {
}

// You can also simply send in a custom offset
@include utilities.allBelow(large, -5em) {
}
```

### Custom size

You can either change the default values in the `$breakpoints` array from `utilities.scss`, or send in a custom size to the mixin.

```scss
@use '@dnb/eufemia/style/core/utilities.scss' as utilities;

// Change default sizes
utilities.$breakpoints: map-merge(
  utilities.$breakpoints,
  (
    // redefine a size
    'medium': 40em,

    // add an offset to the original value
    'large': map-get(utilities.$breakpoints, large) + 5em
  )
);

// Will use the new default 'large' size of 90em
@include utilities.allBelow(large) {
}

// You can also simply send in a custom size
@include utilities.allBelow(90em) {
}
```

## `<fieldset>` CSS reset

Removes default styling on a `fieldset` element.

`@include utilities.fieldsetReset($checkSpaceProps: boolean)`

If true is given, it will handle margin gracefully by checking for e.g. `dnb-space__top--` and not reset if this class exists.

```tsx
render(
  <Wrapper className={fieldsetReset}>
    <ComponentBox hideCode data-visual-test="helper-fieldset-reset">
      <fieldset>I'm a fieldset without styling.</fieldset>
    </ComponentBox>
  </Wrapper>
)
```