Last Updated: September 09, 2019
·
2.498K
· bpierre

Prefix a value with Stylus

I wondered how to prefix a value (like calc) with Stylus. As I started to create a custom calc() function, I found a built-in solution, as usual!

Stylus:

@_import 'nib/vendor' // ← remove the _ after the @: Coderwall bug
vendor-prefixes = webkit moz o ms official

#myselector
  // without unquote(), Stylus would calculate 100% - 25px
  height vendor-value( calc(unquote('100% - 25px')) )

CSS output:

#myselector {
  height: -webkit-calc(100% - 25px);
  height: -moz-calc(100% - 25px);
  height: -o-calc(100% - 25px);
  height: -ms-calc(100% - 25px);
  height: calc(100% - 25px);
}