Configuration

Configuration is a single @use ... with (...) block. There is no config file, no CLI step, no plugin — sass reads it and emits the stylesheet.

@use 'eva-css-fluid' with (
  $sizes: (4, 8, 12, 16, 24, 32, 48, 64, 96, 128),
  $font-sizes: (12, 14, 16, 18, 20, 24, 32),
  $build-class: true,
  $px-rem-suffix: false,
  $name-by-size: true,
  $custom-class: false
);

Options#

$unit-fluid, $reference-width, $fluid-runtime and $min-font-size arrived in 2.2.0. eva-css-fluid/colors accepts none of these — it generates no sizes.

Choosing $sizes#

List what your design uses. Nothing else. The list drives the output size directly: every entry produces four sizing tokens, and with $build-class: true, sixteen properties × four variants of utility classes.

Two constraints:

• 16 is required. It is the rem reference. Leave it out and the compile fails with Size 16 is required as a base size.
• Neither list may be empty.

Some values should never enter the list:

Retrofitting an existing codebase is a different exercise: derive the list from what is actually in the CSS instead of writing it by hand. That workflow is Adopting EVA.

The two build modes#

$build-class is the one option that changes how you write markup. Pick one per project and hold it.

Utility classes — $build-class: true#

EVA emits classes for sixteen properties across every size, plus color, flex, grid and layout utilities.

<div class="flex y g-16 p-32 br-12 _bg-light _c-dark">
  <h2 class="fs-24">Title</h2>
</div>

Fast to write, and the markup carries the design. The tradeoff is stylesheet weight — which is what eva-purge exists to solve.

Variables only — $build-class: false#

EVA emits nothing but custom properties. You write ordinary CSS.

.card {
  display: flex;
  flex-direction: column;
  gap: var(--16);
  padding: var(--32);
  border-radius: var(--12);
  background: var(--light);
  color: var(--dark);
}

.card__title { font-size: var(--fs-24); }

Better for design systems, component libraries, and anything dropped into a codebase that already has class names. eva-css-fluid/variables and eva-css-fluid/core force this mode.

Trimming the class output#

With $custom-class: true, $class-config restricts generation per property. Only the sizes you list are emitted for that property; unlisted properties are skipped entirely.

@use 'eva-css-fluid' with (
  $sizes: (4, 8, 16, 24, 32, 64, 128),
  $font-sizes: (14, 16, 24),
  $custom-class: true,
  $class-config: (
    w: (64, 128),
    px: (16, 24),
    g: (8, 16)
  )
);

The keys must be real property prefixes — w mw h p px pr py br mb mr ml mt pt pb g gap. Anything else is a compile error. The variables are unaffected: var(--32) still exists even when no w-32 class does.

Static escape hatches#

$px-rem-suffix: true adds a fixed counterpart to each size:

--32-px: 32px;
--32-rem: 2rem;

Useful in two situations: debugging a fluid value against its design reference, and the handful of dimensions that must not scale. With $build-class: true you also get w-32-px, p-32-rem and so on.

Fluid unit and accessibility floor#

Since 2.2.0 the fluid unit is a runtime variable rather than a baked-in literal. Configure the default in SCSS, override it per subtree in CSS. This is covered in full under Fluid sizing.

@use 'eva-css-fluid' with (
  $sizes: (4, 8, 16, 24, 48),
  $font-sizes: (16, 24, 48),
  $unit-fluid: 1vw,        // 1cqi to track containers instead of the viewport
  $reference-width: 1440,  // where tokens hit their maximum
  $min-font-size: 14       // px floor on font-size minimums; 0 = off
);

$min-font-size is the mobile floor, not the desktop size. 13–14 is a reasonable value; 16 would flatten the scale.

Next: Fluid sizing.