Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$color-a: red;
$color-a-light: lighten(red, 20%);
$color-b: blue;
$color-b-light: lighten(blue, 20%);
$color-c: green;
$color-c-medium: lighten(green, 20%);

%ns-tag {
    display: block;
    padding: 0.1em 0.5em;
    transition: all 0.2s ease-out;
}

%ns-tag-count {
    font-size: 0.8em;
}

@mixin tag ($color, $border-color) {
    @extend %ns-tag;
    color: $color;
    border: 1px solid $border-color;

    &:hover,
    &:focus,
    &--selected {
        color: white;
        background: $color;
        border-color: $color;
    }

    &__count {
        @extend %ns-tag-count;
        color: $border-color;
    }
}

.ns-tag-primary {
    @include tag($color-a, $color-a-light);
}

.ns-tag-secondary {
    @include tag($color-b, $color-b-light);
}

.ns-tag-tertiary {
    @include tag($color-c, $color-c-medium);
}

SassMeister-output.css

.ns-tag-primary, .ns-tag-secondary, .ns-tag-tertiary {
  display: block;
  padding: 0.1em 0.5em;
  transition: all 0.2s ease-out;
}

.ns-tag-primary__count, .ns-tag-secondary__count, .ns-tag-tertiary__count {
  font-size: 0.8em;
}

.ns-tag-primary {
  color: red;
  border: 1px solid #ff6666;
}

.ns-tag-primary:hover,
.ns-tag-primary:focus,
.ns-tag-primary--selected {
  color: white;
  background: red;
  border-color: red;
}

.ns-tag-primary__count {
  color: #ff6666;
}

.ns-tag-secondary {
  color: blue;
  border: 1px solid #6666ff;
}

.ns-tag-secondary:hover,
.ns-tag-secondary:focus,
.ns-tag-secondary--selected {
  color: white;
  background: blue;
  border-color: blue;
}

.ns-tag-secondary__count {
  color: #6666ff;
}

.ns-tag-tertiary {
  color: green;
  border: 1px solid #00e600;
}

.ns-tag-tertiary:hover,
.ns-tag-tertiary:focus,
.ns-tag-tertiary--selected {
  color: white;
  background: green;
  border-color: green;
}

.ns-tag-tertiary__count {
  color: #00e600;
}