Mixins Accept Parameters
Like functions, mixins also accept parameters.
_mixins.scss
// Rounded elements
@mixin roundy($dim, $brdr) {
width: $dim;
height: $dim;
border: $brdr;
border-radius: 50%;
}
_images.scss
.img-featured {
@include roundy(165px, 4px solid $white);
margin-top: 75px;
position: relative;
z-index: 100;
@media (max-width: $break-xs) {
display: none;
}
}
Mixins with null
Sass supports a null
data type that lets you define optional mixin parameters without creating unnecessary CSS output.
_mixins.scss
// Rounded elements
@mixin roundy($dim: 50px, $brdr: null) {
width: $dim;
height: $dim;
border: $brdr;
border-radius: 50%;
}
_images.scss
.img-featured {
@include roundy(165px);
margin-top: 75px;
position: relative;
z-index: 100;
@media (max-width: $break-xs) {
display: none;
}
}
Mixins with Keyword Arguments
Also, remembering the correct order of arguments can be tricky. Sass solves this by allowing you to name the arguments you pass to a mixin, using keyword arguments.
_images.scss
.img-featured {
@include roundy($brdr: 4px solid $white, $dim: 165px);
margin-top: 75px;
position: relative;
z-index: 100;
@media (max-width: $break-xs) {
display: none;
}
}