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 or root element
* while avoiding nesting and selector repetition.
*
* @todo Might break with more complex selectors. Needs testing and code review.
*
*/

@mixin context($class, $selectors...) {

  // @todo really??
  @if length($selectors) == 1 {
    $selectors: nth($selectors, 1);
  }

  $new-selector: ();

    @each $selector in $selectors {
      // @todo get rid of ugly if function
      $new-selector: selector-replace(if(length($new-selector) == 0, &, $new-selector), $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.
*
* @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';
  }

  @each $selector in & {
    @if (length($selector) < 2) {
      @error '#{&} has no parent selectors';
    }
  }

  $selectors: ();

  @each $selector in & {
    $selector: nth($selector, -2);
    $selectors: append($selectors, $selector, comma);
  }

  @include context($class, $selectors...) {
    @content;
  }
}

// -----------------------------------------------------------------------------
// Root
// -----------------------------------------------------------------------------

/**
* Modifies the context of a selector by adding a user-defined class or
* pseudo-class to the root component
* Useful for adding classes or pseudo-classes to the root element
* while avoiding nesting and selector repetition.
*
* @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';
  }

  $selectors: ();

  @each $selector in & {
    $selector: nth($selector, 1);
    $selectors: append($selectors, $selector, comma);
  }

  @include context($class, $selectors...) {
    @content;
  }
}

// -----------------------------------------------------------------------------
// Example
// -----------------------------------------------------------------------------

// The 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.

.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 {
  .parent {
    .child {
      @include root(':hover') {
        color: blue;
      }
    }
  }
}

.some, .other {
  .selector1 {
    @include context(':hover', '.other') {
      color: blue;
    }
  }
  .selector2 {
    @include context(':hover', '.some', '.other') { // same result as using parent(:hover)
      color: blue;
    }
  }
}

SassMeister-output.css

/**
* 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 or root element
* while avoiding nesting and selector repetition.
*
* @todo Might break with more complex selectors. Needs testing and code review.
*
*/
/**
* 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.
*
* @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
*
*/
/**
* Modifies the context of a selector by adding a user-defined class or
* pseudo-class to the root component
* Useful for adding classes or pseudo-classes to the root element
* while avoiding nesting and selector repetition.
*
* @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
*
*/
.parent {
  color: blue;
}
.parent:hover {
  color: red;
}
.parent.is-active {
  color: green;
}
.parent .child {
  display: none;
}
.parent:hover .child {
  display: block;
}
.parent.is-active .child {
  color: red;
}

.root:hover .parent .child {
  color: blue;
}

.some .selector1, .other:hover .selector1 {
  color: blue;
}
.some:hover .selector2, .other:hover .selector2 {
  color: blue;
}