Mixins

@mixin retina-image

This mixin will help you generate the necessary css code to support retina images.

• $image - path or url of the retina image, ej. /assets/images/retina@2x.png
• $width - the width for the image
• $height - the height for the image

     
// Mixin to add support for retina display on images
@mixin retina-image($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
} 
     
  

@mixin truncate-text

Truncating the text can be made through css, and is even easier with this handy mixin.

     
// Mixin that will truncate text
@mixin truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
     
  

@mixin absPosition

Thinking about position your elements with absolute values, this mixin is the way to go.

• $top - top value position
• $right - right value position
• $bottom - bottom value position
• $left - left value position

    
// Mixin to set the abs position of any element
@mixin absPosition($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}
    
  

@mixin hidden-text

This reall helpful mixin will hide the text, but still be counting for SEO. Kudos to Nicolas Gallagher.

    
// Hidden text - by Nicolas Gallagher
@mixin hidden-text {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
    
  

@mixin font-size

An easy way to support font-size on rem and pixel values to a better support for IE is this mixin.

• $size - the desired font size
• $line - the line height to that font size

    
// Font-size mixin, with IE7 & IE8 support, CSS tricks courtesy
@mixin font-size($size: 1.6, $line: $size * 1.25) {
  font-size: ($size * 10) + px;
  line-height: ($line * 10) + px;
  font-size: $size + rem;
  line-height: $line + rem;
}
    
  

@mixin keyframes

An easy way to handle keyframes for css animations is provided by this mixin.

• $name - animation class name

    
// Animation keyframes
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content
  }
  @-moz-keyframes #{$name} {
    @content
  }
  @-ms-keyframes #{$name} {
    @content
  }
  @-o-keyframes #{$name} {
    @content
  }
  @keyframes #{$name} {
    @content
  }
}
    
  

@mixin animation

This comes helpful when using keyframes to animate or just to give a little animation.

• $value - the animation property or properties to affect.

    
// Animation mixin
@mixin animation($value) {
  -webkit-animation: $value;
  -moz-animation: $value;
  -ms-animation: $value;
  -o-animation: $value;
  animation: $value;
}