Assorted-Sass-Mixins.markdown

Assorted Sass Mixins

Just a few sass mixins

A Pen by Ash Whiting on CodePen.

License.

style.scss

@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; 
   }
}