Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

// Permet la déclaration de css en fonction de l'état d'une "variable".
// Le css peut être déclaré dans un sélecteur spécifique à chaque état
// au sein d'une même feuille de style ou, tel quel, dans des feuilles
// de style séparées.
//
// Il est ainsi possible de rédiger tous les styles possible (js/no-js)
// au même endroit et de les déclarer ou non en changeant l'état de la
// variable correspondante.
//
// Ceci est une ébauche, des setters devraient être utils
//
// Rapide démo à la ligne 74

@mixin case($property, $cases...) {
  // get declaration method
  $method:  map-get($case__methods, $property);
  // get current property states (for this file)
  $states:   map-get($case__states, $property);

  // declare each case in different files
  @if $method == split {
    $declare: false;
    // search for a current provided state
    @each $case in $cases {
      // case is a current state
      @if index($states, $case) {
        $declare: true;
      }
    }
    // current state found, declare
    @if $declare {
      @content;
    }
  }
  // declare each state nested in its own selector
  @elseif $method == selector {
    // search for a current provided state
    @each $case in $cases {
      // case is a current state
      @if index($states, $case) {
        $selector: map-get($case__selectors, $property $case);
        @if $selector {
          #{$selector} {
            @content;
          }
        }
      }
    }
  }
}

$case__states: (
  script:     false,
  direction:  ltr rtl,
  page:       home single   
);

$case__selectors: (
  script true:    '.js &',
  script false:   '.no-js &',
  direction ltr:  '[dir="ltr"] &',
  direction rtl:  '[dir="rtl"] &',
  page home:      'body.home &',
  page index:     'body.index &',
  page single:    'body.single &'    
);

$case__methods: (
  script:     split,
  direction:  selector,
  page:       selector
);

// Petite démo
.foo {
  @include case(script, true) {
    display: none;
  }
  @include case(script, false) {
    background: black;
    color: white;

    @include case(direction, ltr) {
      float: left;
    }
    @include case(direction, rtl) {
      float: right;
    }
  
    @include case(page, home, index, single) {
      background: #EEE;
    }
    @include case(page, home) {
      color: red;
    }
    @include case(page, index) {
      color: green;
    }
    @include case(page, single) {
      color: blue;
    }
  }
}

SassMeister-output.css

.foo {
  background: black;
  color: white;
}
[dir="ltr"] .foo {
  float: left;
}
[dir="rtl"] .foo {
  float: right;
}
body.home .foo {
  background: #EEE;
}
body.single .foo {
  background: #EEE;
}
body.home .foo {
  color: red;
}
body.single .foo {
  color: blue;
}