Skip to content

Instantly share code, notes, and snippets.

@jonwalstedt
Created February 13, 2015 14:54
Show Gist options
  • Select an option

  • Save jonwalstedt/0c63e1663289678d03b6 to your computer and use it in GitHub Desktop.

Select an option

Save jonwalstedt/0c63e1663289678d03b6 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="test"></div>
// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----
$array: #9f9f9f, 0%, #7a7a7a, 75% !default;
@mixin gradient-linear-vertical ($startcol:#FFF, $startloc:0%, $endcol:#000, $endloc:100%){
@if $startcol == $endcol {
background: $startcol;
} @else {
background: mix($startcol, $endcol);
background: -webkit-gradient(linear, left top, left bottom, color-stop($startloc, $startcol), color-stop($endloc, $endcol)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, $startcol $startloc, $endcol $endloc); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, $startcol $startloc, $endcol $endloc);
background: -o-linear-gradient(top, $startcol $startloc,$endcol $endloc);
background: -ms-linear-gradient(top, $startcol $startloc,$endcol $endloc);
background: linear-gradient(top, $startcol $startloc,$endcol $endloc);
//filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startcol)}',endColorstr='#{ie-hex-str($endcol)}',GradientType=0)";
}
}
$array: #999999, 0%, #999999, 75% !default;
.div {
@include gradient-linear-vertical($array...);
&.disabled {
@include gradient-linear-vertical($array...);
}
}
.div {
background: #8c8c8c;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9f9f9f), color-stop(75%, #7a7a7a));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9f9f9f 0%, #7a7a7a 75%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #9f9f9f 0%, #7a7a7a 75%);
background: -o-linear-gradient(top, #9f9f9f 0%, #7a7a7a 75%);
background: -ms-linear-gradient(top, #9f9f9f 0%, #7a7a7a 75%);
background: linear-gradient(top, #9f9f9f 0%, #7a7a7a 75%);
}
.div.disabled {
background: #8c8c8c;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9f9f9f), color-stop(75%, #7a7a7a));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9f9f9f 0%, #7a7a7a 75%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #9f9f9f 0%, #7a7a7a 75%);
background: -o-linear-gradient(top, #9f9f9f 0%, #7a7a7a 75%);
background: -ms-linear-gradient(top, #9f9f9f 0%, #7a7a7a 75%);
background: linear-gradient(top, #9f9f9f 0%, #7a7a7a 75%);
}
<div class="test"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment