Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use multiple variables Stylus in calc()?

Tags:

stylus

calc

Everything is in the title. I can not incorporate several Stylus variables in the function CSS calc ().

I created a code Sass, I would convert myself under Stylus:

// *.scss

$gutter : 1rem;

.sizeXS-m10 {
    width: calc(#{100% / 12 * 10} - #{$gutter});
}

For a single variable, no problem:

// *.styl

$gutter = 1rem

.sizeXS-m10
  width 'calc(100% / 12 * 10 - %s)' % $gutter

Things get complicated when trying to integrate the results of this operation in a variable:

100% / 12 * 10
like image 898
Olivier C Avatar asked Nov 14 '15 08:11

Olivier C


1 Answers

Just wrap the values into brackets, like this:

// *.styl

$gutter = 1rem

.sizeXS-m10
  width 'calc(%s / %s * %s - %s)' % (100% 12 10 $gutter)
like image 91
Panya Avatar answered Sep 28 '22 02:09

Panya