SASS: 10 mixins imprescindibles

Colección de los 10 mixins de SASS que más vengo utilizando en la mayoría de proyectos con su correspondiente ejemplo de uso en scss:

1. Media Queries

$mobile: 480px;
$tabletPortrait: 767px;
$tabletLandscape: 1024px;
$desktop: 1200px;

@mixin breakpoint($media) {
  @if $media == mobile {
    @media (max-width: $mobile) { @content; }
  }
  @else if $media == tablet {
    @media (min-width: $tabletPortrait) and (max-width: $tabletLandscape) { @content; }
  }
  @else if $media == smallScreen {
    @media (max-width: $desktop) { @content; }
  }
  @else if $media == desktop {
    @media (min-width: $desktop) { @content; }
  }
}

Uso:

aside {
  width: 30%;
  float: right;
  @include breakpoint(mobile) {
    width: 100%;
    float: none;
  }
}

2. Transitions

@mixin transition($what: all, $length: .3s, $easing: ease-in-out, $args: '') {
  @if( $args=='' ){
    -webkit-transition: $what $length $easing;
    transition: $what $length $easing;
  } @else {
    -webkit-transition: $args;
    transition: $args;
  }
}

Uso:

.elemento {
  @include transition;
}
a {
  @include transition(color);
}

3. Transform

@mixin transform($args){
  -webkit-transform: $args;
  transform: $args;
}

Uso:

.elemento {
  @include transform(rotate(45deg));
}

4. Clearfix

%clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

Uso:

.elemento {
  @extend %clearfix;
}

5. Keyframes

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

Uso:

@include keyframes(nombre-animacion) {
  0%   { opacity: 0.3; }
  50%  { opacity: 1; }
  100% { opacity: 0.3; }
}

6. Liner-Gradients

@mixin linear-gradient($fromColor, $toColor) {
  background-color: $toColor;
  background-image: -webkit-gradient(linear, left top, left bottom, from($fromColor), to($toColor));
  background-image: -webkit-linear-gradient(top, $fromColor, $toColor);
  background-image: linear-gradient(top, $fromColor, $toColor);
}

Uso:

.elemento {
  @include linear-gradient(#000,#fff);
}

7. Box-Sizing

@mixin box-sizing($args : border-box){
  -webkit-box-sizing: $args;
  -moz-box-sizing: $args;
  box-sizing: $args;
}

Uso:

.elemento {
  @include box-sizing;
}

8. Text Overflow

@mixin text-truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Uso:

.elemento {
  @include text-truncate;
}

9. Hide

@mixin hide {
  display:block;
  text-indent:-666px;
  overflow: hidden;
}

Uso:

.elemento {
  @include hide;
}

10. Font-size Rem

@function countRem($value) {
  $remValue: $value / 16px;
  @return $remValue * 1rem;
}
@mixin font-size($value) {
  font-size: $value;
  font-size: calculateRem($value);
}

Uso:

.elemento {
  @include font-size(24px); }
}