Skip to content

Instantly share code, notes, and snippets.

@kosei27
Created March 6, 2015 08:58
Show Gist options
  • Save kosei27/1d161a5e9f976d40f57f to your computer and use it in GitHub Desktop.
Save kosei27/1d161a5e9f976d40f57f to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
/*
> Top-level control structures can assign to global variables
> without needing !global. Variables first defined in these
> structures will still be local without !global.
[Changelog](http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#341_22_august_2014)
*/
/* control structures: @if, @for, @each and @while */
$foo: 1;
@if true {
$foo: 10; // assign without `!global`
}
.sample1 {
content: $foo; //-> 10
}
/* @function and @mixin need `!global` */
$bar: 2;
@function foo() {
$foo: 100; // without `!global` so it's local
$bar: 20 !global;
@return "foo() function has been used";
}
.sample2 {
content: foo();
margin: $foo; //-> 10
padding: $bar; //-> 20
}
/* Nested `@if` */
$baz: 3;
@function bar() {
@if true {
$baz: 30; // without `!global` so it's local
}
@return "bar() function has been used";
}
.sample3 {
content: bar();
margin: $baz; //-> 3
}
/* use `!global` to define global variables */
@if true {
$qux: 4 !global;
}
@mixin foo() {
/* foo() mixin has been used so now you can use `$quux` */
$quux: 5 !global;
}
.sample4 {
content: $qux; //-> 4
@include foo;
margin: $quux; //-> 5
}
/*
> Top-level control structures can assign to global variables
> without needing !global. Variables first defined in these
> structures will still be local without !global.
[Changelog](http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#341_22_august_2014)
*/
/* control structures: @if, @for, @each and @while */
.sample1 {
content: 10;
}
/* @function and @mixin need `!global` */
.sample2 {
content: "foo() function has been used";
margin: 10;
padding: 20;
}
/* Nested `@if` */
.sample3 {
content: "bar() function has been used";
margin: 3;
}
/* use `!global` to define global variables */
.sample4 {
content: 4;
/* foo() mixin has been used so now you can use `$quux` */
margin: 5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment