← Back to Documentation

Documentation

Responsive property The adaptiveValue SCSS mixin for smooth property scaling

The adaptiveValue mixin automatically changes the value of a CSS property depending on the screen width: from the starting value on wide screens to the final value on smaller ones. You can set custom width ranges and behavior modes outside of those ranges.

Download Animmaster Vite Template Save your time — start now

What is it?

With the SCSS mixin “Responsive property” you can set up an automatic change of any CSS property value that has a numeric value (for example: font-size, padding, gap, etc.).

Main idea
Instead of tons of media queries, you set a start and end value — and the mixin smoothly “interpolates” between them across the required widths.

Using the mixin

Inside an SCSS selector, call it (usually via the av snippet):

SCSS
@include adaptiveValue("property", start, end);
  • property — the CSS property (as a string) you want to make responsive.
  • start — the starting value (number only, without px).
  • end — the ending value (number only, without px).

Examples:

Examples

@include adaptiveValue("font-size", 50, 20);
@include adaptiveValue("padding-top", 80, 10);
@include adaptiveValue("gap", 24, 12);

How it works

The mixin works based on variables from src/styles/settings.scss: $minWidth, $maxWidth, $maxWidthContainer, $containerPadding and $containerWidth.

By default
If $maxWidthContainer > 0 — scaling happens between $containerWidth and $minWidth.
If $maxWidthContainer = 0 — scaling happens between $maxWidth and $minWidth.
  • Wider than the “from” width — the value equals the start value.
  • Below $minWidth — the value equals the end value.

Modes

You can configure the behavior outside the range by specifying a mode:

SCSS
@include adaptiveValue("property", start, end, mode);

mode can be 0 (or omitted), 1, 2, 3:

0 (or omitted)

Wider than “from” — start, below “to” — end.

1

Works only inside the range (or the default range). Outside it — the default value / inheritance applies.

2

Wider than “from” — start, below “to” — default value / inheritance.

3

Wider than “from” — default value / inheritance, below “to” — end.

Example
@include adaptiveValue("font-size", 50, 20, 1);

Custom width ranges

You can define your own width range where scaling happens:

SCSS
@include adaptiveValue("property", start, end, mode, widthFrom, widthTo);
  • widthFrom — the width below which scaling starts (number only, without px).
  • widthTo — the width down to which scaling continues (number only, without px).
Warning
If you specify custom ranges — mode is required.
Example (custom range)
@include adaptiveValue("font-size", 50, 20, 0, 800, 480);

You can also make multiple calls with different ranges:

Example (multi-range)

@include adaptiveValue("font-size", 50, 20, 2, 800, 480);
@include adaptiveValue("font-size", 20, 10, 3, 480, 320);
Tip
Don’t add extra media queries “for this” — it’s better to combine modes + ranges.

Where is the mixin located?

The adaptiveValue mixin is located in: src/styles/includes/mixins.scss

Download

Want the same responsive approach without extra media queries? Download the template and start using adaptiveValue in your projects right away.

Download Animmaster Vite Template Save your time — start now