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);
}
Written by Pierre Bertet
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Stylus
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#