Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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