Just a few sass mixins
A Pen by Ash Whiting on CodePen.
Just a few sass mixins
A Pen by Ash Whiting on CodePen.
@import "compass/css3"; | |
// Assorted mixins | |
// Vertical Gradient | |
// @include vertical_grad(image, start, end) | |
@mixin vertical-grad($img, $start, $end) { | |
background-color: $start; | |
background-image: url($img); | |
background-image: -webkit-linear-gradient(top, $start, $end); | |
background-image: -moz-linear-gradient(top, $start, $end); | |
background-image: -ms-linear-gradient(top, $start, $end); | |
background-image: -o-linear-gradient(top, $start, $end); | |
background-position: left bottom; | |
background-size: 50% 100%; | |
background-repeat: repeat-x; | |
} | |
// Text shadow | |
// just add the color | |
@mixin text-shad($color){ | |
text-shadow:1px 1px 1px $color; | |
} | |
// Force hardware | |
@mixin force-hardware(){ | |
-webkit-transform: translate3d(0, 0, 0); | |
-webkit-backface-visibility: hidden; | |
-webkit-perspective: 1000; | |
-webkit-transform: translateZ(0); | |
z-index: 60000; | |
} | |
// basic extensions of the dropshadow | |
// Doesn't work in IE8 | |
@mixin shadow-color-text($text-color, $shad-color) { | |
color:$text-color; | |
text-shadow:1px 1px 1px $shad-color; | |
} | |
// Background cover (with extra polyfill) | |
@mixin background-cover() { | |
-webkit-background-size: cover!important; | |
-moz-background-size: cover!important; | |
-o-background-size: cover!important; | |
background-size: cover!important; | |
// this is a background cover polyfill for ie8. | |
// https://github.com/louisremi/background-size-polyfill | |
// It's important to have the file in the site root. Or a full path | |
// as it's not relative to the css file. | |
-ms-behavior: url(backgroundsize.min.htc); | |
behavior: url(backgroundsize.min.htc); | |
} | |
// Background color with opacity and fallbacks | |
@mixin background-color($ieColor, $r, $g, $b, $opacity) { | |
background:$ieColor; | |
background:rgba($r, $g, $b, $opacity); | |
} | |
// Text em and percentage mixins | |
// Convert PX to EM (eg. em(14px)) | |
@function em($target, $context: $base-font-size) { | |
@return $target / $context + 0em; | |
@if $target == 0 { | |
@return 0; | |
} | |
} | |
// Convert PX to % (eg. pc(14px)) | |
@function pc($target, $context: 16px) { | |
@return ($target / $context) * 100%; | |
@if $target == 0 { | |
@return 0; | |
} | |
} |