Mixins / Methods

You can think of mixins as methods or macros that you can use to create complex styling concepts. With a combination of mixins and conditions, styles can be defined is a very concise manner. A mixin can be defined with or without an argument. To use a mixin you include it into your style. Including can be done with the longhand verion @include or the shorthand version + and the name.

Example mixin without an argument:

// mixin with an argument
@mixin emphasis-text
  font-family: sans-serif
  padding:
    left: 3px
    right: 3px
  color: #c0c0c0

.blurb-text
  +emphasis-text

.nav-tip
  @include emphasis-text  

If we want to vary the color of the text, we could provide an argument in the mixin.

Example mixin with an argument:

// mixin with an argument
@mixin emphasis-text($color)
  font-family: sans-serif
  padding:
    left: 3px
    right: 3px
  color: $color

.blurb-text
  +emphasis-text(#c0c0c0)

.nav-tip
  @include emphasis-text(#c0c0c0)