SASS

Mixin example

by Ben Clayton

HTML

<div class="message">
Hello World
</div>

The mixin can accept arguments and do calculations. The output of this mixin (in this case) is a CSS rule and will be unfurled where ever you @include it.

SCSS

@mixin my-padding-mixin($some-number) {
  padding: $some-number;
}

div {
  border:1px solid red;
}

.message {
  @include my-padding-mixin(20px);
}