Furatto comes with many weapons under the hood, in this case mixins, that some of them are used on the core of compiling it, but other ones are just for you.

@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} {
  @-moz-keyframes #{$name} {
  @-ms-keyframes #{$name} {
  @-o-keyframes #{$name} {
  @keyframes #{$name} {

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

@mixin box-emboss

This mixin will help you build an embossing and letterpress effect.

  • $outerOpacity - the outer opacity, ej. 0.5
  • $innerOpacity - the inner opacity, ej. 0.1
// Embossing and letterpress effect
@mixin box-emboss($outerOpacity, $innerOpacity) {
  @include box-shadow(rgba(white, $outerOpacity) 0 1p 0,
                      rgba(black, $innerOpacity) 0 1px 0 inset);

Many more mixins...

We did not covered every single mixin here, but you can check them out at _mixins.scss source file.