host-variable.scss

@function trip-initial($str) {
  @return str-slice($str, 2);
}

$str: "0123456789abcdefghijklmnopqrstuvwxyz";
$chars: ();
@for $i from 1 through 36 {
	$char: str-slice($str, $i, $i);
	$chars: append($chars, $char);
}

@function random-char($n: 1) {
	$res: "";
	@for $i from 1 through $n{
		$c: nth($chars, random(36));
		$res: $res + $c;
	}
	@return $res;
}

@function host($name, $suffix: "@@@@", $len: 4) {
	@if $suffix == "@@@@" {
		$suffix: random_char($len);
	}
	@return "--" + $name + "-" + $suffix;
}

@mixin host-variable($args...) {
  $host: $host;
  $variable: false;
  $default: false;

  @if length($args) == 2 {
    $variable: nth($args, 1);
    $default: nth($args, 2);
  } @else if length($args) == 3 {
    $host: nth($args, 1);
    $variable: nth($args, 2);
    $default: nth($args, 3);
  } @else {
    @warn "length of host-var mixin $args must be 2 or 3!";
  }

  #{$variable}: $default;
  #{$host}#{trip-initial($variable)}: var(#{$variable});
  // #{$host}#{$variable}: var(#{$variable});
}

@function host-variable($args...) {
  $host: $host;
  $variable: false;

  @if length($args) == 1 {
    $variable: nth($args, 1);
  } @else if length($args) == 2 {
    $host: nth($args, 1);
    $variable: nth($args, 2);
  } @else {
    @warn "length of host-var mixin $args must be 1 or 2!";
  }

  @return var(#{$host}#{trip-initial($variable)});
}


// Alias
@mixin host-var($args...) { @include host-variable($args...); }
@mixin hvar($args...) { @include host-variable($args...); }

@function host-var($args...) { @return host-variable($args...); }
@function hvar($args...) { @return host-variable($args...); }