mixins.scss

// Should apply to all variants sharing the same parent name
// Specificity should be 0010
// output: `.parent-name`
@mixin parent($parent-name) {
  [class^="#{$parent-name}\~"]:not([class*="\:"]),
  .#{$parent-name} {
    @content;
  }
}

// should inherit styles from non-variable parent of same name
// specificy should be 0010
// output: `.parent-name~variant-name`
@mixin parent-variant($parent-name, $variant-name) {
  [class*="#{$parent-name}\~#{$variant-name}"]:not([class*="\:"]),
  .#{$parent-name}\~#{$variant-name} {
    @content;
  }
}

// variants of this child should inherit styles from here
// specificity should be 0010
// output: `.parent:child`, `.parent~variant:child`
@mixin child($parent-name, $child-name, $has-parent-variant: 'false', $parent-variant:null) {  
  @if $has-parent-variant == 'false' {
    [class^="#{$parent-name}\:#{$child-name}\~"],
    .#{$parent-name}\:#{$child-name} {
      @content;
    }
  }
  @if $has-parent-variant == 'true' {
    [class^="#{parent-name}\~#{$parent-variant}\:#{$child-name}\~"],
    .#{$parent-name}\~#{$parent-variant}\:#{$child-name} {
      @content;
    }
  }
}

@mixin child-variant($parent-name, $child-name, $variant-name, $has-parent-variant: 'false', $parent-variant:null) {
  @if $has-parent-variant == 'false' {
    .#{$parent-name}\:#{$child-name}\~#{$variant-name} {
      @content;
    }
  }
  
  @if $has-parent-variant == 'true' {
    .#{$parent-name}\~#{$parent-variant}\:#{$child-name}\~#{$variant-name} {
      @content;
    }
  }
}