Skip to content

Instantly share code, notes, and snippets.

@sbone
Created March 28, 2012 18:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sbone/2229177 to your computer and use it in GitHub Desktop.
Save sbone/2229177 to your computer and use it in GitHub Desktop.
A collection of SASS mixins and the like.
@mixin rounded-button($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
@mixin rounded-left-top-bottom($radius) {
-webkit-border-top-left-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
-moz-border-radius-topleft: $radius;
-moz-border-radius-bottomleft: $radius;
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin gradient($first, $second) {
background-color: $second;
background-image: -webkit-gradient(linear, left top, left bottom, from($second), to($first));
background-image: -webkit-linear-gradient(top, $second, $first);
background-image: -moz-linear-gradient(top, $second, $first);
background-image: -ms-linear-gradient(top, $second, $first);
background-image: -o-linear-gradient(top, $second, $first);
background-image: linear-gradient(to bottom, $second, $first);
}
@mixin transition($timing) {
-webkit-transition: all $timing ease-out;
-moz-transition: all $timing ease-out;
-ms-transition: all $timing ease-out;
-o-transition: all $timing ease-out;
transition: all $timing ease-out;
}
@mixin box-shadow($horizontal, $vertical, $blur, $spread, $color ) {
-webkit-box-shadow: $horizontal $vertical $blur $spread $color;
-moz-box-shadow: $horizontal $vertical $blur $spread $color;
box-shadow: $horizontal $vertical $blur $spread $color;
}
@mixin background-size($bg-val){
background-size: $bg-val;
-webkit-background-size: $bg-val;
-moz-background-size: $bg-val;
-o-background-size: $bg-val;
background-size: $bg-val;
}
@mixin opacity($opacity) {
opacity: $opacity;
filter: alpha(opacity=$opacity*100)
}
@mixin rbga($color, $alpha){
$rgba: rgba($color, $alpha);
$ie-hex-str: ie-hex-str($rgba);
background-color: transparent;
background-color: $rgba;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
zoom: 1;
}
@jeremypharo
Copy link

cool! I did this in some of my css as well. I do like to pass vars to border-related mixins though for flexibility

@sbone
Copy link
Author

sbone commented Mar 28, 2012

Ah, good call!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment