How to Use a Stylus Variable in Calc

How to use a Stylus variable in calc?

In order to use a Stylus variable inside a calc expression, one must employ the string % operator:

arrow-size = 5px
left "calc(50% - %s)" % arrow-size

How to use multiple variables Stylus in calc()?

Just wrap the values into brackets, like this:

// *.styl

$gutter = 1rem

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

How to calc square root in stylus

As answered there you can use the built-in math function for this, so the custom sqrt could look better:

sqrt(x)
  return math(x, 'sqrt')

How to use a stylus variable in a selector

You have to use interpolation. In the comment Jcl has made a little mistake by not remove the quotes:

STYLUS

for $num in (1..100)
  :scope[md={$num}]
    width: $num + '%'

OUTPUT

:scope[md=1] {
  width: 1%;
}
:scope[md=2] {
  width: 2%;
}
:scope[md=3] {
  width: 3%;
}
...

If you want the output with quotes you can escape like this:

:scope[md=\"{$num}\"]

---

Related Topics