Skip to content

Instantly share code, notes, and snippets.

@thbar
Forked from mihar/_gradients.sass
Created October 27, 2011 11:28
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save thbar/1319313 to your computer and use it in GitHub Desktop.
Save thbar/1319313 to your computer and use it in GitHub Desktop.
SCSS mixing for CSS3 gradients
@mixin gradient($from, $to) {
/* fallback/image non-cover color */
background-color: $from;
/* Firefox 3.6+ */
background-image: -moz-linear-gradient($from, $to);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient($from, $to);
/* Opera 11.10+ */
background-image: -o-linear-gradient($from, $to);
}
.my_div {
@include gradient($background_color, white);
}
@coljung
Copy link

coljung commented Oct 30, 2013

I thought the syntax was something like this:

background: -moz-linear-gradient(top, $from 0%, $to 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
background: -webkit-linear-gradient(top, $from 0%,$to 100%);
background: -o-linear-gradient(top, $from 0%,$to 100%);

Wont the resulting code generate errors ?

@PVasili
Copy link

PVasili commented Apr 8, 2016

стандартно, подключите компас:
http://compass-style.org/examples/compass/css3/gradient/

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