0

I'm having trouble using variables and functions with STYLUS

Check out my demo

Using no variable works fine:

.div
  position relative
  background #3cd
  width calc(100vw - 10em)
  height calc(100vh - 10em)
  margin 5em

Using variables breaks:

$var = 10em

.div
  position relative
  background #3cd
  width calc(100vw - $var)
  height calc(100vh - $var)
  margin calc($var / 2)

Any ideas? I also tried string % operators, no luck. Thank you

meow-meow-meow
  • 508
  • 2
  • 10
  • 26
  • Possible duplicate of [How to use a Stylus variable in calc?](http://stackoverflow.com/questions/32272158/how-to-use-a-stylus-variable-in-calc) – Wild Beard Apr 19 '17 at 21:20

1 Answers1

0

hh, I think you should check out the stylus syntax. When you use stylus variables, "calc()" should not be added. Try directly for example margin $var / 2 instead of margin calc($var / 2)

Muran
  • 84
  • 3
  • thanks for your reply, I tried removing the calc() functions, however it's still broken https://codepen.io/katiemoons/pen/RVrbJy?editors=0100 – meow-meow-meow Apr 19 '17 at 02:58
  • I think it results from your `body` and its css property. I rewrite your code as follows: `
    ` and css `body{height: 600px}`. It works.     – Muran Apr 19 '17 at 03:13
  • And there is another bug I ignored before, you should add brackets for `$var / 2`, that is `($var / 2)` – Muran Apr 19 '17 at 03:20
  • I made those changes in the demo but it doesn't work, is it working for you when you edit my pen? – meow-meow-meow Apr 19 '17 at 19:01
  • @kathrynm yeah, I edited in your pen and it worked. Do you add brackets for `margin` property? i.e. `margin ($var / 2)` – Muran Apr 20 '17 at 00:13
  • could you share your pen with me please? – meow-meow-meow Apr 20 '17 at 17:47
  • @kathrynm I think I have got your problem. Here is the demo I meet with problems: https://codepen.io/anon/pen/gWroZw?editors=1100#anon-signup. It seems that stylus can't handle `vw - em`. According to the stylus documentation: >Multiplicative and additive binary operators work as expected. Type conversion is applied within unit type classes, or default to the literal value. For example 5s - 2px results in 3s. So when you check the compiled css, you will get `width: 90vw`. – Muran Apr 21 '17 at 01:03