scss Sass：在任何选择器上创建新范围的最简单方法。 #sass

Posted 2021-05-18

.foo {
  var-1: "$var-1: new scope";
}
.foo .bar {
  var-2: "$var-2: nested scope";
}
.foo .bar {
  /* Nested scope never works. */
  var-2: "$var-2: nested scope";
  /* .foo scope */
}

.baz {
  var-1: "$var-1: global scope";
  var-2: "$var-2: global scope";
}

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

// Sass: The easiest way of creating new scope at root-level witout any selectors.
//
// http://twitter.com/whizark
//
// Other ideas
// https://github.com/whizark/xass#ideas 

// Mixin
@mixin scope() {
  @content;
}

// Test
$var-1: '$var-1: global scope';
$var-2: '$var-2: global scope';

@include scope() {
  $var-1: '$var-1: new scope';

    .foo {
      var-1: $var-1;

      $var-2: '$var-2: .foo scope';

      @include scope() {
        $var-2: '$var-2: nested scope';

        .bar {
          var-2: $var-2;
        }
      }

      .bar {
        /* Nested scope never works. */
        var-2: $var-2;  /* .foo scope */
      }
    }
}

.baz {
  var-1: $var-1;
  var-2: $var-2;
}