Skip to content

Instantly share code, notes, and snippets.

Created August 12, 2012 23:28
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
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;
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;
Copy link

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


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