Table of Contents

URL: https://www.progressiverobot.com/sass-sass-mixin-syntax/

Create reusable groups of declarations with Mixins. A good use case is when many vendor prefixes need to be used. Code it once and call it anywhere:

				
					
@mixin column-count($nb-columns) {

  -webkit-column-count: $nb-columns;

  -moz-column-count: $nb-columns;

  column-count: $nb-columns;

}



// Calling the mixin:

.two-columns { @include column-count(2); }

Result

mixin illustration for: Result

The above snippet will yield the following CSS:

				
					
.two-columns {

  -webkit-column-count: 2;

  -moz-column-count: 2;

  column-count: 2;

}