Skip to content
Responsive dimension without use of media queries.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

SASS Linear Expression

Responsive dimension without 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(


Quick install


npm i sass-linear-expression


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

Browser support

All browsers with support for CSS calc() and vw, which include :

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


The linear-expression() SASS function return an expression to use with the CSS calc(). This enable more complexe expression.

$linear: linear-expression(

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

It is also possible to do addition or substraction of multiple linear expressions.

$linear1: linear-expression(

$linear2: linear-expression(

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


Precision of float number will vary depending on your compiler configuration, which affect the precision of the expression.

Order of operations

CSS calc() function abide by order of operations, for this reason the generated expression will be in parentheses, which can result like the following.

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

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

$linear: linear-expression(


linear-expression() accept all absolute CSS units (cm, mm, in, px, pt, pc), altough the output will always by in pixel.

This is possible because of real-world unit calculations, has explain in the SASS documentation of numeric units.

You can’t perform that action at this time.