Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@mixin cp-context($contexts) {
  @each $context in $contexts {
    @each $current in $cp-currentContext {
      @if $context == $current {
        @if $context == 'system' {
          .cp-AdminWrap & {
            @content;
          }
        } @else if $context == 'admin' {
          .cp-AdminWrap & {
            @content;
          }
        } @else {
          @content;
        }
      }
    }
  }
}

// Leave a different one of these variables uncommented to see the different 
// outputs

// Here's an example of how we would generate the stylesheet for the front-end
$cp-currentContext : 'shared' 'client';

// Here's an example of how we would generate the stylesheet for the back-end
//$cp-currentContext : 'shared' 'admin';

// Here's an example of how we would generate the stylesheet for just the 
// "system" styles that we could layer on top of the front-end styles (two 
// seperate files; similar to Common.css & FisherPrice.css, today)
//$cp-currentContext : 'system';

.box {
  // These styles are shared across all contexts
  @include cp-context('shared') {
    display: block;
  }
  
  // These styles are specific to the client context
  @include cp-context('client') {
    color: blue;
  }
  
  // These styles are specific to both the system and the admin contexts
  @include cp-context('system admin') {
    color: red;
    
    // This is demonstrating how you can prepend the selector with a class and
    // not break the .cp-AdminWrap auto-wrap
    @at-root .rootWrap & {
      border-color: red;
    }
  }
}

// And this is demonstrating how you can chain a class with the .cp-AdminWrap
// auto-wrap
@include cp-context('system') {
  &.is-state .box {
    outline-color: red;
  }
}

SassMeister-output.css

.box {
  display: block;
  color: blue;
}