I've finally took the time to take a look at SASS and god damn it's nice for many reasons.. but my favorite is this:
You can write this..
// Note:
// I chose to name it background-gradient
// for consistency, but you can name the
// mixin whatever you like
@mixin background-gradient($start: #ffffff, $end: #000000) {
/* Old browsers */
background: $start;
/* FF3.6+ */
background: -moz-linear-gradient(top, $start, $end);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop($start), color-stop($end));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, $start, $end);
/* Opera11.10+ */
background: -o-linear-gradient(top, $start, $end);
/* IE10+ */
background: -ms-linear-gradient(top, $start, $end);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start}', endColorstr='#{$end}', GradientType=0 );
/* W3C */
background: linear-gradient(top, $start, $end);
}
Then you can write..
a.button {
@include background-gradient(#111111, #444444);
&:hover {
@include background-gradient(#333333, #666666);
}
}
Instead of..
a.button {
background: #111111;
background: -moz-linear-gradient(top, #111111, #444444);
background: -webkit-gradient(linear, left top, left bottom, color-stop(#111111), color-stop(#444444));
background: -webkit-linear-gradient(top, #111111, #444444);
background: -o-linear-gradient(top, #111111, #444444);
background: -ms-linear-gradient(top, #111111, #444444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#444444', GradientType=0 );
background: linear-gradient(top, #111111, #444444);
}
a.button:hover {
background: #111111;
background: -moz-linear-gradient(top, #333333, #666666);
background: -webkit-gradient(linear, left top, left bottom, color-stop(#333333), color-stop(#666666));
background: -webkit-linear-gradient(top, #333333, #666666);
background: -o-linear-gradient(top, #333333, #666666);
background: -ms-linear-gradient(top, #333333, #666666);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#666666', GradientType=0 );
background: linear-gradient(top, #333333, #666666)
}
It makes CSS fun again :)
Hey, just a minor suggestion :)
So as not to confuse newcomers, it might be better to name the mixin to something like "my-cool-mixin" rather than "background-gradient" just for the purposes of the example. It might save a bit of head-scratching for people like me!
@Paul McClean
Good point :)