source/sass/tools/_mixins.scss

   1 /*
   2 |-------------------------------------------------------------------------------
   3 | Mixins
   4 |-------------------------------------------------------------------------------
   5 */
   6 // Shortcuts to breakpoints
   7 @mixin breakpoint($breakpoint) {
   8   @if $breakpoint == "mobile" {
   9     @media (max-width: 1024px) {
  10       @content;
  11     }
  12   }
  13
  14   @else if $breakpoint == "desktop" {
  15     @media (min-width: 1025px) {
  16       @content;
  17     }
  18   }
  19 }
  20
  21 // Border radius
  22 @mixin border-radius($value: 3px) {
  23   -webkit-border-radius: $value;
  24   -moz-border-radius   : $value;
  25   -ms-border-radius    : $value;
  26   -o-border-radius     : $value;
  27   border-radius        : $value;
  28 }
  29
  30 // Background size
  31 @mixin bg-size($value: cover) {
  32   -webkit-background-size: $value;
  33   -moz-background-size   : $value;
  34   -ms-background-size    : $value;
  35   -o-background-size     : $value;
  36   background-size        : $value;
  37 }
  38
  39 // Transition
  40 @mixin transition($transition : all 150ms ease-in-out) {
  41   -webkit-transition: $transition;
  42   -moz-transition   : $transition;
  43   -ms-transition    : $transition;
  44   -o-transition     : $transition;
  45   transition        : $transition;
  46 }
  47
  48 // TranslateX
  49 @mixin translateX($value) {
  50   -webkit-transform: translateX($value);
  51   -moz-transform:    translateX($value);
  52   -ms-transform:     translateX($value);
  53   -o-transform:      translateX($value);
  54   transform:         translateX($value);
  55 }
  56
  57 // 2 column layout
  58 @mixin post2Col() {
  59   width: 48%;
  60   float: left;
  61   margin-right: 4%;
  62
  63   &:nth-child(2n) {
  64     margin-right: 0;
  65   }
  66
  67   &:nth-child(2n + 1) {
  68     clear: left;
  69   }
  70 }
  71
  72 // 3 column layout
  73 @mixin post3Col() {
  74   width: 31.33333%;
  75   float: left;
  76   margin-right: 3%;
  77
  78   &:nth-child(3n) {
  79     margin-right: 0;
  80   }
  81
  82   &:nth-child(3n + 1) {
  83     clear: left;
  84   }
  85 }