Permalink
2c88fd6 Jan 21, 2014
96 lines (73 sloc) 1.7 KB

Mixins make reusing small snippets of CSS much simpler. You define them with the @mixin directive.

Positional arguments via the argument function #() extend the capability of mixins for repurposing in different contexts.

@mixin display-font {
  font-family: "Arial Black", sans-serif;
  font-size: #(0); 
  letter-spacing: #(1);
}

/* Another mixin with default arguments */
@mixin blue-theme {
  color: #(0 navy);
  background-image: url("images/#(1 cross-hatch).png");
}

/* Applying the mixins */
.foo {
  @include display-font(100%, .1em), blue-theme;
}
.foo {
  font-family: "Arial Black", sans-serif;
  font-size: 100%;
  letter-spacing: .1em;
  color: navy;
  background-image: url("images/cross-hatch.png");
}

Skipping arguments

Mixin arguments can be skipped by using the default keyword:

@mixin display-font {
  font-size: #(0 100%);
  letter-spacing: #(1);
}

/* Applying the mixin skipping the first argument so the
   default value is used instead */
#foo {
  @include display-font(default, .3em);
}

Sometimes you may need to use the same positional argument more than once. In this case the default value only needs to be specified once:

@mixin square {
  width:  #(0 10px);
  height: #(0);
}

.foo {
  @include square;
}
#foo {
  width:  10px;
  height: 10px;
}

Mixing-in from other sources

Normal rules and abstract rules can also be used as static mixins without arguments:

@abstract negative-text {
  text-indent: -9999px;
  overflow: hidden;
}

#main-content .theme-border {
  border: 1px solid maroon;
}

.foo {
  @include negative-text, #main-content .theme-border;
}