MENU


Mixins

A mixin (mix-in) is a substitutable block of ruleset. Its definition may look like an ordinary CSS style rule.

A mixin may be used as a namespace as well as a function.
( ) are optional when the maxin is being applied. During a declaration, however, the parentheses ( ) suppress the output.
.a  { color:red; }
.b  { background:green; }
.c(){ font-size:15px; }
span {
   .a;
   .b();
}

.a {
  color: red;
}
.b {
  background: green;
}
span {
  color: red;
  background: green;
}
A mixin may also contain whole selectors rather than just properties.
Adding !important when applying a mixin causes !important to be present in all the resulting CSS rules.
#a() {
   &:hover {
      border: 1px solid red;
      color: green;
   }
}
button {
   #a !important;
}

button:hover {
  border: 1px solid red !important;
  color: green !important;
}
To merge a rule with a comma, add a + to both the definition and the application. +_ merges with a space instead.
.m() {
   margin+_: 0px;
   box-shadow+: inset 0 0 10px #555;
}

p {
   .m;
   margin+_: 10px; 
   box-shadow+: 0 0 20px black;
}

p {
  margin: 0px 10px;
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}