component-mixins.scss

// ----
// libsass (v3.5.0.beta.2)
// ----

//
// GLOBAL
//
@mixin cmp-base($component) {
  .#{$component} {
    @content;
  }
}
@mixin cmp-modifier($component, $modifier) {
  .#{$component}--#{$modifier} .#{$component} {
    @content;
  }
}

// --------------------------------------------------------------------------------
// --------------------------------------------------------------------------------

/**
 * COMPONENT "f-radiobox"
 */
$component: 'f-radiobox';

@include cmp-base($component) {
  background: grey;

  &__field {
    background: white;
  }
  
  &__label {
    color: black;
  }
}

@include cmp-modifier($component, 'coloured') {
  background: green;

  &__field {
    background: red;
  }
  
  &__label {
    color: green;
  }
}

output.css

/**
 * COMPONENT "f-radiobox"
 */
.f-radiobox {
  background: grey;
}

.f-radiobox__field {
  background: white;
}

.f-radiobox__label {
  color: black;
}

.f-radiobox--coloured .f-radiobox {
  background: green;
}

.f-radiobox--coloured .f-radiobox__field {
  background: red;
}

.f-radiobox--coloured .f-radiobox__label {
  color: green;
}