Instantly share code, notes, and snippets.

What would you like to do?
Sass 101 - A newb's guide: mixins

Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document.

Mixins are defined with the @mixin directive. It’s followed by the name of the mixin and optionally the arguments, and a block containing the contents of the mixin.

In the following example, the Mixin is included in the document with the @include directive.


SassMeister Gist

@mixin default-box {
border: 1px solid black;
box-shadow: 5px 5px 5px black;
width: 75%;
margin: 0 auto;
.my-new-class {
@include default-box;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment