CODEWITHSUNDEEP
node.jsstylus
danday74
danday74

Reputation: 57241

How do you convert a number to percentage in stylus?

I am writing a simple stylus mixin The code should be self explanatory BUT doesn't work. How do I convert the value to a percentage? Does stylus have a builtin mixin for this? I read about the unit mixin but cannot access the docs :( I do apologise our work proxy is stopping me accessing the stylus docs

mymixin(myval = 0)
  width myval%

.myclass
  mymixin(20)

Upvotes: 1

Views: 476

Answers (2)

Panya
Panya

Reputation: 2699

Another way to achieve this:

mymixin(myval = 0)
  width (myval)%

.myclass
  mymixin(20)

Upvotes: 2

danday74
danday74

Reputation: 57241

Managed to guess it :)

ring(inner = 0, outer = 0)
  inner = unit(inner, '%')
  innerPlus = unit(inner + 1, '%')
  outer = unit(outer, '%')
  outerMinus = unit(outer - 1, '%')
  height 100px
  width 100px
  background radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) inner, rgba(255, 255, 255, 1) innerPlus, rgba(255, 255, 255, 1) outerMinus, rgba(255, 255, 255, 0) outer, rgba(255, 255, 255, 0) 100%)

.myring
  height 100px
  width 100px
  ring(5, 20)

Upvotes: 0

Related Questions