Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----

// -----------------------------------------------------------------------------
// Context
// -----------------------------------------------------------------------------

/**
* Modifies the context for the current (&) selector by adding a user-defined 
* class or pseudo-class to an ancestor component
* Useful for adding classes or pseudo-classes to the parent element
* while avoiding nesting and selector repetition.
*
* @author Daniel Guillan @danielguillan
*
* @throws No selector found
* @throws #{&} has no parent selectors
*
* @todo Might break with more complex selectors. Test and improve.
*
*/

@mixin context($class, $selector...) {
  @if length($selector) > 1 {
    
  } @else {
    $selector: nth($selector, 1);
  }
  

  
  $new-selector: ();
  
  @error nth(&, 2);
  @each $line in & {
    @error $line;
    $n: selector-replace($line, $selector, '#{$selector}#{$class}');
    $new-selector: append($new-selector, $n);
  }
  //$new-selector: selector-replace(&, $selector, '#{$selector}#{$class}');
  @at-root #{$new-selector} {
    @content; 
  }
}

// -----------------------------------------------------------------------------
// Parent
// -----------------------------------------------------------------------------

/**
* Modifies the context of a selector by adding a user-defined class or 
* pseudo-class to its parent component
* Useful for adding classes or pseudo-classes to the parent element
* while avoiding nesting and selector repetition.
*
* @author Daniel Guillan @danielguillan
*
* @throws No selector found
* @throws #{&} has no parent selectors
*
* @todo Might break with more complex selectors. Test and improve.
* @todo Create a context mixin where parent() and base() are aliases for it
*
*/

@mixin parent($class) {
  
  @if (& == null) {
    @error 'No selector found';
  }
  
  $test: (hello);
  @each $s in & {
    @if (length($s) < 2) {
      @error '#{&} has no parent selectors';
    }
  }
  
  $selector: nth(nth(&, 1), -2);
  
  @include context($class, $selector) {
    @content 
  }
}

// -----------------------------------------------------------------------------
// Parent
// -----------------------------------------------------------------------------

/**
* Modifies the context of a selector by adding a user-defined class or 
* pseudo-class to its parent component
* Useful for adding classes or pseudo-classes to the parent element
* while avoiding nesting and selector repetition.
*
* @author Daniel Guillan @danielguillan
*
* @throws No selector found
* @throws #{&} has no parent selectors
*
* @todo Might break with more complex selectors. Test and improve.
* @todo Create a context mixin where parent() and base() are aliases for it
*
*/

@mixin root($class) {
  
  @if (& == null) {
    @error 'No selector found';
  }
  
  @if (length(nth(&, 1)) < 2) {
    @error '#{&} has no parent selectors';
  }
  
  $selector: nth(nth(&, 1), 1);
  
  @include context($class, $selector) {
    @content 
  }
}
// -----------------------------------------------------------------------------
// Example
// -----------------------------------------------------------------------------

// Old way. Note the selector repetition.

// .parent {
//   color: blue;
  
//   &:hover {
//     color: red;
//
//     .child {
//       display: block;
//     }
//
//   }
//  
//   &.is-active {
//     color: green;
//
//     .child {
//       color: red;
//     }
//   }
//  
//   .child {
//     display: none;    
//   }
//  
// }

// New way. Everything in its right place.

.some, .other {
  .different {
    .selector {
      @include context(':hover', '.different') {
        border: solid 2px red;
      }
    }
  }
}

.parent {
  color: blue;
  
  &:hover {
    color: red;
  }
  
  &.is-active {
    color: green;
  }
  
  .child {
    display: none;
    
    @include parent(':hover') {
      display: block;
    }
    
    @include parent('.is-active') {
      color: red;
    }
  }
  
}

.root,
.test {
  .parent {
    .child {
      @include root(':hover') {
        color: blue;
      }
    }
  }
}

SassMeister-output.css

.other .different .selector