MENU


Mixins

A mixin (mix-in) is a substitutable label for a block of selected styles or properties, in contrast to a variable that contains a value.
A mixin is defined with @mixin and substituted with @include. When including a mixin, you may include an optional @content block. A mixin may be chained.
@mixin bg {
   background: yellow;
   &:hover { background: blue; }
   @content;
}
@mixin large-text {
   p {
      font: {
        size: 20px;
        weight: bold;
      }
      color: #ff0000;
      @include bg {
         text-decoration: underline;
      }
   }
}
.page-title {
   @include large-text;
   padding: 4px;
}
@include large-text;

.page-title {
  padding: 4px;
}
.page-title p {
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  background: yellow;
  text-decoration: underline;
}
.page-title p:hover {
  background: blue;
}

p {
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  background: yellow;
  text-decoration: underline;
}
p:hover {
  background: blue;
}
You may pass in arguments to a mixin. An argument for a mixin can be optional, a list or a map. If you pass in both a list and a map, the list must appear before the map.
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }



@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}



@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}