Skip to content

Instantly share code, notes, and snippets.

@whizark
Last active August 29, 2015 14:14
Show Gist options
  • Save whizark/f74e037819ea53b5d7e2 to your computer and use it in GitHub Desktop.
Save whizark/f74e037819ea53b5d7e2 to your computer and use it in GitHub Desktop.
Sass: The easiest way of creating new scope at root-level witout any selectors. #sass
// ----
// 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;
}
.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";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment