Alex Alex - 1 year ago 79
Sass (Sass) Question

Avoid repeat the same mixin in Sass

I have this


Sass code:

$padding: (
top: "top",
right: "right",
bottom: "bottom",
left: "left",
all: "all"

@mixin no-padding($map) {
@each $padding-side, $side in $map {
@if $side == 'all' {
& {
padding: 0 !important;
} @else {
&-#{$side} {
padding-#{$side}: 0 !important;

Use of it:

.u-noPadding {
@include no-padding($padding);

I want to use the same
but now for
, is there any solution to avoid repeating the same
and make a good use of best practices?

Answer Source
@mixin no($type,$sides:null) {
    $i:0 !important;
    @if $sides == null {
    } @else {
        @each $side in $sides { 

.u-noPadding {
    @include no(padding, top left etc...);        // choose any side separated with a space
.u-noMargin {
    @include no(margin);                          // instead of 'all', type nothing

Like this? Your $sides will be stored in a temporary map automatically if your second parameter is set, no need extra map for this. About the second parameter: If you want no sides, let it empty and all sides will have 0. Similiar to your 'all' idea.. it's shorter.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download