Skip to content

Instantly share code, notes, and snippets.

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