Inspired by csstyle (www.csstyle.io)

Creator.scss

$elem-prefix: "" !default;
$part-prefix: "__" !default;
$mod-prefix: "--" !default;

@function get-element($elem) {
	@return "." + $elem-prefix + $elem;
}

@function get-part($part) {
	@return $part-prefix + $part;
}

@function get-modifier($mod) {
	@return & + $mod-prefix + $mod;
}

@mixin element($elem) {
	@at-root #{get-element($elem)} {
		@content;
	}
}

@mixin mod($mod) {
	@at-root #{get-modifier($mod)} {
		@content;
	}
}

@mixin part($part) {
	// Check if nested in an modifier
	$mod-index: str-index(#{&}, $mod-prefix);
	$mod-index: 0 !default;
	$mod-index: $mod-index - 1;
	
	// Check if nested in another part
	$part-index: str-index(#{&}, $part-prefix);
	$part-index: 0 !default;
	$part-index: $part-index - 1;

	// Get the parent element
	$elem: str-slice(#{&}, 0, $mod-index);

	@if $mod-index > 0 {
		@if $part-index > 0 {
			&#{get-part($part)} {
				@content;
			}
		}
		@else {
			#{$elem}#{get-part($part)} {
				@content;
			}
		}
	}
	@else {
		&#{get-part($part)} {
			@content;
		}
	}
}

@mixin get-element($elem) {
	#{get-element($elem)} {
		@content
	}
}