Skip to content

Instantly share code, notes, and snippets.

@crazyrohila
Created August 3, 2013 11:08
Show Gist options
  • Save crazyrohila/6146107 to your computer and use it in GitHub Desktop.
Save crazyrohila/6146107 to your computer and use it in GitHub Desktop.
Some Mixins
/**
* Some mixins I use when not including compass/bourbon in project.
*/
@mixin vendor($property, $value) {
-webkit-#{$property}:$value;
-moz-#{$property}:$value;
-ms-#{$property}:$value;
-o-#{$property}:$value;
#{$property}:$value;
}
/**
* @vendor
*
* Basic mixin for all prefixed properties.
* eg. @include vendor(trasition, all 0.2s linear);
*/
/* ========================================= */
@mixin box-shadow($shadows...) {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
/**
* @box-shadow
*
* eg. @include box-shadow(1px 0 1px 0 #333, 1px 1px 1px 0 #000, 0 0 1px 0 #ccc inset);
*/
/* ========================================= */
@mixin linear-gradient($direction, $gradients...) {
background-image: -webkit-gradient(linear, $direction, $gradients);
background-image: -webkit-linear-gradient($direction, $gradients);
background-image: -moz-linear-gradient($direction, $gradients);
background-image: -o-linear-gradient($direction, $gradients);
background-image: linear-gradient($direction, $gradients);
}
/**
* @linear-gradient
*
* eg. @include linear-gradient(top, #fff 33%, #999 66%, #444 99%);
*/
/* ========================================= */
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-o-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment