Skip to content
Permalink
master
Go to file
 
 
Cannot retrieve contributors at this time
95 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;
}
You can’t perform that action at this time.