Stylus - calc variable

calc() is a function in CSS3 used to perform calculations on CSS attributes expressions.

/* cssproperty: calc(expression) */

expression formed using arithmetic operators and result value as output.

Here is an example calc example

div{
  width: calc(20px + 60px);
}

The width is calculated as 80px for the given div in CSS.

How to use stylus variable in calc function

stylus variables can be used in CSS with % sprintf syntax Sprintf is like a printf function that used the % symbol, to generate a string literal with passing arguments.

%s in place with string replaces the string value.

Here is a syntax

"calc(100px-%s)" % (variable)

Here is an example

mobilewidth=100px
div{
    width:"calc(200px + %s)" % (mobilewidth)
}

Generated CSS

div {
  width: calc(200px + 100px);
}

You can also use multiple variables.

mobilewidth=100px
basewidth=500px
div{
width:"calc(%s - %s)" % (basewidth mobilewidth)
}

Generated CSS

div {
  width: calc(500px - 100px);
}