no-duplicate-mixins.md

Pattern: Duplicate mixin

Issue: -

Description

Disallow duplicate mixins within a stylesheet.

@mixin font-size-default {
  font-size: 16px;
}
@mixin font-size-default {
  font-size: 18px;
}
/** ↑
 * These are duplicates */

Examples

true

The following patterns are considered violations:

@mixin font-size-default {
  font-size: 16px;
}
@mixin font-size-default {
  font-size: 18px;
}

@mixin font-size-default {
  font-size: 16px;
}
@mixin font-size-sm {
  font-size: 14px;
}
@mixin font-size-default {
  font-size: 18px;
}

@mixin font-size {
  font-size: 16px;
}
@mixin font-size($var) {
  font-size: $var;
}

@mixin font-size($property, $value) {
  #{$property}: $value;
}
@mixin font-size($var) {
  font-size: $var;
}

@mixin font-size {
  color: blue;
}

.b {
  @mixin font-size {
    color: red;
  }
  @include font-size;
}

The following patterns are not considered violations:

@mixin font-size-default {
  font-size: 16px;
}
@mixin font-size-lg {
  font-size: 18px;
}

Further Reading

• stylelint-scss - no-duplicate-mixins