Skip to content

Instantly share code, notes, and snippets.

@chriseppstein
Created August 12, 2012 23:28
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chriseppstein/3335300 to your computer and use it in GitHub Desktop.
Save chriseppstein/3335300 to your computer and use it in GitHub Desktop.
This gist demonstrates how global and local variables work with mixin content blocks in Sass.
$global: one;
@mixin foo {
$local: 1;
$mixin-local: true;
global-before-content: $global;
mixin-local-before-content: $local;
@content;
global-after-content: $global;
mixin-local-after-content: $local;
}
div {
$local: 2;
global-before-include: $global;
div-local-before-include: $local;
@include foo {
$local: 3;
$global: two;
global-within-content: $global;
div-local-within-content: $local;
// The next line would raise an error because
// $mixin-local was defined in a different scope.
// mixin-local: $mixin-local;
}
global-after-include: $global;
div-local-after-include: $local;
}
div {
global-before-include: one;
div-local-before-include: 2;
global-before-content: one;
mixin-local-before-content: 1;
global-within-content: two;
div-local-within-content: 3;
global-after-content: two;
mixin-local-after-content: 1;
global-after-include: two;
div-local-after-include: 3;
}
@matthewcopeland
Copy link

Thanks for this. Ive been tinkering with ways to redefine variables inside of media queries.

Example https://gist.github.com/3486688

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment