Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="root en">
  <ul class="links">
    <li class="link">
      <a class="link-home"><i class="icon">tag</i>HOME</a>
    </li>
    <li class="link">
      <a class="link-about"><i class="icon">tag</i>ABOUT</a>
    </li>
  </ul>
</div>
<br>
<div class="root zh">
  <ul class="links">
    <li class="link">
      <a class="link-home"><i class="icon">tag</i>HOME</a>
    </li>
    <li class="link">
      <a class="link-about"><i class="icon">tag</i>ABOUT</a>
    </li>
  </ul>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

/*
Selector Modifier

example:
.a .b, .a .c {
  // prepend an '.en' to the first selector
  // suffix an ':hover' to the 2nd selector
  @include selector-modifier(1 prepend '.en', -2 suffix ':hover') {
    color: red;
  }
}

output:
.en .a:hover .b, .en .a:hover .c {
  color: red;
}

*/

$selector-modifier-default-place: suffix !default;


// normalize every modifier format to list (index place status)
@function normalize-modifiers($modifiers, $selector) {
  $result: ();
  $places: (prepend, prefix, suffix, append);

  @each $modifier in $modifiers {
    $new-modifier: ();
    $len: length($modifier);

    @if $len < 2 or $len > 3 {
      @error "$modifier should be a list with length 2 or 3 and format: index [place] status";
    }

    // 保证 $index 为正数
    $index: nth($modifier, 1);
    @if type-of($index) != number {
      @error "$modifier first argument must be number";
    }
    @if $index < 0 {
      $index: $index + length($selector) + 1;
    }

    // make sure $place and $status exist，and unquote them
    $place: unquote(if($len == 2, $selector-modifier-default-place, nth($modifier, 2)));
    $status: unquote(if($len == 2, nth($modifier, 2), nth($modifier, 3)));

    @if not index($places, $place) {
      @error "$modifier $place argument must be one of (#{$places})";
    }

    $result: append($result, ($index $place $status), comma);

  }

  @return $result;

}


@function get-modifiers-by-index-status($modifiers, $index, $status: false) {
  $result: ();
  @each $modifier in $modifiers {
    @if nth($modifier, 1) == $index {
      @if not $status or nth($modifier, 2) == $status {
        $result: append($result, $modifier);
      }
    }
  }
  @return $result;
}

@mixin selector-modifier($modifiers...) {
  $selectors: &;
  $new-selectors: ();

  @each $selector in $selectors {
    $modifiers: normalize-modifiers($modifiers, $selector);
    $new-selector: ();

    // update one $selector at a time
    @for $i from 1 through length($selector) {

      $item: nth($selector, $i);

      // prepend
      @each $modifier in get-modifiers-by-index-status($modifiers, $i, prepend) {
        $new-selector: append($new-selector, nth($modifier, 3));
      }

      // prefix
      @each $modifier in get-modifiers-by-index-status($modifiers, $i, prefix) {
        $item: nth($modifier, 3) + $item;
      }

      // suffix
      @each $modifier in get-modifiers-by-index-status($modifiers, $i, suffix) {
        $item: $item + nth($modifier, 3);
      }

      $new-selector: append($new-selector, $item);

      // append
      @each $modifier in get-modifiers-by-index-status($modifiers, $i, append) {
        $new-selector: append($new-selector, nth($modifier, 3));
      }
    }


    $new-selectors: append($new-selectors, $new-selector, comma);
  }

  @at-root #{$new-selectors} {
    @content;
  }
}

ul {
  padding: 0;
}
li {
  list-style: none;
}


.root {
  width: 400px;
  margin: 0 auto;
  
  .links {
    .link {
      display: inline-block;
      
      & ~ .link {
        margin-left: 10px;
      }
      
      a {
        padding: 10px 40px;
        cursor: pointer;
        background: gray;
        
        &:hover {
          background: blue;
          color: white;
          font-size: 700;
        }
        
        .icon {
          margin-right: 5px;
          @include selector-modifier(-2 ':hover', 1 suffix '.zh') {
            color: red;
            background: green;
          }
          @include selector-modifier(-2 ':hover', 1 suffix '.en') {
            color: yellow;
            background: green;
          }
        } 
        
        
      }
    }
  }
}

SassMeister-output.css

/*
Selector Modifier

example:
.a .b, .a .c {
  // prepend an '.en' to the first selector
  // suffix an ':hover' to the 2nd selector
  @include selector-modifier(1 prepend '.en', -2 suffix ':hover') {
    color: red;
  }
}

output:
.en .a:hover .b, .en .a:hover .c {
  color: red;
}

*/
ul {
  padding: 0;
}

li {
  list-style: none;
}

.root {
  width: 400px;
  margin: 0 auto;
}
.root .links .link {
  display: inline-block;
}
.root .links .link ~ .link {
  margin-left: 10px;
}
.root .links .link a {
  padding: 10px 40px;
  cursor: pointer;
  background: gray;
}
.root .links .link a:hover {
  background: blue;
  color: white;
  font-size: 700;
}
.root .links .link a .icon {
  margin-right: 5px;
}
.root.zh .links .link a:hover .icon {
  color: red;
  background: green;
}
.root.en .links .link a:hover .icon {
  color: yellow;
  background: green;
}

SassMeister-rendered.html

<div class="root en">
  <ul class="links">
    <li class="link">
      <a class="link-home"><i class="icon">tag</i>HOME</a>
    </li>
    <li class="link">
      <a class="link-about"><i class="icon">tag</i>ABOUT</a>
    </li>
  </ul>
</div>
<br>
<div class="root zh">
  <ul class="links">
    <li class="link">
      <a class="link-home"><i class="icon">tag</i>HOME</a>
    </li>
    <li class="link">
      <a class="link-about"><i class="icon">tag</i>ABOUT</a>
    </li>
  </ul>
</div>