Skip to content

Instantly share code, notes, and snippets.

@d3vron
Created July 13, 2011 14:04
Show Gist options
  • Save d3vron/1080346 to your computer and use it in GitHub Desktop.
Save d3vron/1080346 to your computer and use it in GitHub Desktop.
Easy-to-use CSS3 mixins for Stylus (includes linear-gradient)
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
-ms-{prop} args
-o-{prop} args
{prop} args
border-radius()
vendor('border-radius', arguments)
box-shadow()
vendor('box-shadow', arguments)
transition()
vendor('transition', arguments)
transform()
vendor('transform', arguments)
transform-origin()
vendor('transform-origin', arguments)
user-select()
vendor('user-select', arguments)
background-linear-gradient(startPoint, startColor, startInterval, endColor, endInterval, deprecatedWebkitStartPoint = false, deprecatedWebkitEndPoint = false)
background-color startColor
if deprecatedWebkitStartPoint && deprecatedWebkitEndPoint
background-image -webkit-gradient(linear, deprecatedWebkitStartPoint, deprecatedWebkitEndPoint, color-stop(startInterval, startColor), color-stop(endInterval, endColor))
background-image -webkit-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
background-image -moz-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
background-image -ms-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
background-image -o-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
background-image linear-gradient(startPoint, startColor startInterval, endColor endInterval)
@sylido
Copy link

sylido commented Oct 28, 2014

I realize this is a pretty old mixin list, but it does pop-up on the top of google's results.
The gradient function already generates the appropriate styles - maybe it's because I am using the nib extension.

background-image linear-gradient(startPoint, startColor startInterval, endColor endInterval)
    background-color startColor
    background-image linear-gradient(startPoint, startColor startInterval, endColor endInterval)

This works nicer in this scenario, otherwise you will get A LOT of extra/wrong CSS properties.
Thanks for the nice mixin !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment