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)
@node-monk
Copy link

These are great. Thank you for putting them out there

@mizzao
Copy link

mizzao commented Sep 24, 2013

I tried doing

.blah
  box-shadow 4px 4px 4px 4px #000 inset

which resulted in

.blah -webkit-box-shadow args -moz-box-shadow args -ms-box-shadow args -o-box-shadow args {
  box-shadow: 4px 4px 4px 4px #000 inset;
}

What gives?

@joaostein
Copy link

@mizzao change the code to:

vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  -ms-{prop} args
  -o-{prop} args
  {prop} args

Just align the identation

@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