Permalink
Browse files

New, more powerful Linear Gradient mixin!

Accepts multiple colors, stops, and a direction.
@include linear-gradient($colors: #ddd #bbb #999 #777, $stops: 0% 50%
50% 100%);
  • Loading branch information...
jamesfinley committed Apr 22, 2012
1 parent 1e3c6c0 commit 54b16c32072f728eb0058ea2cd27622105b97227
Showing with 36 additions and 1 deletion.
  1. +36 −1 _mixins.scss
View
@@ -127,7 +127,7 @@
background-image: radial-gradient($origin, $kind, $firstStop, $secondStop)
}
-@mixin linear-gradient($first, $last) {
+@mixin linear-gradient-legacy($first, $last) {
background: $first; /* Old browsers */
background: -moz-linear-gradient(top, $first 0%, $last 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$first), color-stop(100%,$last)); /* Chrome,Safari4+ */
@@ -138,6 +138,41 @@
background: linear-gradient(top, $first 0%,$last 100%); /* W3C */
}
+@mixin linear-gradient($colors, $stops, $direction: top) {
+ @if type-of($colors) != list {
+ @include linear-gradient-legacy($colors, $stops);
+ }
+ @else {
+ $firstColor: '';
+ $lastColor: '';
+ $ci: 1;
+ $list: 0;
+ @each $color in $colors {
+ @if $ci == 1 {
+ $firstColor: $color;
+ }
+ @if $ci + 1 == length($colors) {
+ $lastColor: $color;
+ }
+ $list_item: join($color, nth($stops, $ci), space);
+ @if $list == 0 {
+ $list: $list_item;
+ }
+ @else {
+ $list: $list, $list_item;
+ }
+ $ci: $ci + 1;
+ }
+ background: $firstColor; /* Old browsers */
+ background: -moz-linear-gradient($direction, $list); /* FF3.6+ */
+ background: -webkit-linear-gradient($direction, $list); /* Chrome10+,Safari5.1+ */
+ background: -ms-linear-gradient($direction, $list); /* Opera11.10+ */
+ background: -o-linear-gradient($direction, $list); /* IE10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$firstColor}', endColorstr='#{$lastColor}',GradientType=0); /*IE6-9 */
+ background: linear-gradient($direction, $list); /* W3C */
+ }
+}
+
@function columns($count: 1, $padding: 0) {
$column-width: 60px !default;

0 comments on commit 54b16c3

Please sign in to comment.