Skip to content

Instantly share code, notes, and snippets.

Created June 30, 2014 17:04
Show Gist options
  • Save anonymous/8a423227bf08cefed711 to your computer and use it in GitHub Desktop.
Save anonymous/8a423227bf08cefed711 to your computer and use it in GitHub Desktop.
A Pen by Ash Whiting.
@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment