A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It helps keep your Sass very DRY
-scss documention
Mixin works like a function in javascript or any other programming language .They can accept a default parameter or parameter can be assigned to them.
scss
@mixin theme($theme: DarkGray) { background: $theme; box-shadow: 0 0 1px rgba($theme, .25); color: #fff; } .info { @include theme; } .alert { @include theme($theme: DarkRed); } .success { @include theme($theme: DarkGreen); } ` css `.info { background: DarkGray; box-shadow: 0 0 1px rgba(169, 169, 169, 0.25); color: #fff; } .alert { background: DarkRed; box-shadow: 0 0 1px rgba(139, 0, 0, 0.25); color: #fff; } .success { background: DarkGreen; box-shadow: 0 0 1px rgba(0, 100, 0, 0.25); color: #fff; } 
Top comments (0)