So I've been messing with SASS for a few days now and it is amazing.

If you don't already use it for your CSS then you're missing out - SASS will enable you to save time both in terms of creating and editing your CSS, plus it just feels right when you're coding.

Chris's awesome video (go to Videos on here) all about Codekit is uber helpful so I'd recommend you view it, but for those getting into or already using it, I figured a snippets thread would come in handy.

So here are some snippets I've made for my workflow, with instructions on how to use them in your .scss files that will output all the CSS you need. The added benefit is that you won't even need to worry about vendor prefixes, it's all taken care of in the mixin.

Just copy paste and then use the examples within your SASS.

--> Transitions Mixin

@mixin transition($transition-property, $transition-time, $method) {
	-webkit-transition: $transition-property $transition-time $method;
	-moz-transition: $transition-property $transition-time $method;
	-ms-transition: $transition-property $transition-time $method;
	-o-transition: $transition-property $transition-time $method;
	transition: $transition-property $transition-time $method;
}
/* Usage - Stick into the top of your SCSS sheet and @include where needed for cross browser transitions. 

.class {
     @include transition($transition-property, $transition-time, $method);
}

$transition-property = the property you want to transition
$transition-time = seconds you want the transition to last
$method = how you want it to transition - e.g. ease-in-out

Usage example;

-------------

.item {
    @include transition(padding, 1s, ease-in-out);
}

-------------

*/

--> Gradients Mixin

@mixin linear-gradient($fromColor, $toColor) {
  background-color: $toColor; /* Fallback Color */
  background-image: -webkit-gradient(linear, left top, left bottom, from($fromColor), to($toColor)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, $fromColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, $fromColor, $toColor); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, $fromColor, $toColor); /* IE10 */
  background-image:      -o-linear-gradient(top, $fromColor, $toColor); /* Opera 11.10+ */
  background-image:         linear-gradient(top, $fromColor, $toColor);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$fromColor', EndColorStr='$toColor');
}

/* Usage - Stick into the top of your SCSS sheet and @include where needed for cross browser linear gradients. 

.class {
    @include linear-gradient(#color, $color);

}

Can pass Hex values or indeed a variable color if required.

Usage example;

-------------

$myColor: red; // not required unless using variable.

.item {
    @include linear-gradient(#BADA55, $myColor);
}

-------------


IE9 Support (idea courtesy of http://www.colorzilla.com/gradient-editor/ )

Support for full multi-stop gradients with IE9 (using SVG).

Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

*/