SASS Linear Expression

Responsive dimensions without the use of media queries.

p {

  // font size of 16px at viewport width of 320px
  // font size of 18.24px at viewport width of 768px
  // font size of 24px at viewport width of 1920px

  font-size: calc(#{linear-expression(
    (320px,16px),
    (1920px,24px)
  )});

}

Quick install

NPM

npm i sass-linear-expression

Import

import 'sass-linear-expression/linear-expression.scss'

Browser support

All browsers with support for CSS calc() and vw are supported, which includes:

• Internet Explorer 11
• Chrome
• Firefox
• Safari
• Android Browser

Usage

The linear-expression() SASS function returns an expression intended to use within the CSS calc() function. This enables more complex expressions:

$linear: linear-expression(
  (320px,16px),
  (1920px,24px)
);

// Multiplication
font-size: calc(#{$linear} * 2);
// Division
font-size: calc(#{$linear} / 2);
// Addition
font-size: calc(#{$linear} + 10%);
// Subtraction
font-size: calc(#{$linear} - 10%);

It is also possible to add or subtract multiple linear expressions:

$linear1: linear-expression(
  (320px,16px),
  (1920px,24px)
);

$linear2: linear-expression(
  (320px,8px),
  (1920px,12px)
);

font-size: calc(#{$linear1} + #{$linear2});

Precision

The precision of float numbers will vary depending on your compiler configuration, which affects the precision of the generated expressions.

• Node SASS precision option

Order of operations

The CSS calc() function follows the standard order of operations. For this reason the generated expression will be surrounded by parentheses, which can result in the following:

p {
  font-size: calc((5px + .5vw));
}

A third argument is available to remove parentheses from the expression.

$linear: linear-expression(
  (320px,16px),
  (1920px,24px),
  false
);

Units

linear-expression() accepts all absolute CSS units (cm, mm, in, px, pt, pc), although the output will always be in pixels.

This is made possible by SASS's support of real-world unit calculations, as detailed in the SASS documentation of numeric units.