Skip to content

Instantly share code, notes, and snippets.

@nemoDreamer
Created June 11, 2015 15:02
Show Gist options
  • Save nemoDreamer/82ca98840218c50dc7aa to your computer and use it in GitHub Desktop.
Save nemoDreamer/82ca98840218c50dc7aa to your computer and use it in GitHub Desktop.
Sadly, this doesn't work...
// Palette
$dark-color: #000;
$light-color: #fff;
// Theme mixins
@mixin sg_themed {
$foreground-color: $dark-color;
$background-color: $light-color;
@content;
.sg_dark_theme & {
$foreground-color: $light-color;
$background-color: $dark-color;
@content;
}
}
@mixin sg_foreground_background($foreground-strength: 1, $background-strength: 1) {
color: rgba($foreground-color, $foreground-strength);
background-color: rgba($background-color, $background-strength);
}
@mixin sg_box_shadow($depth: 20px) {
box-shadow: 0px 1px $depth rgba($dark-color, 0.6),
0px 0px 0px 1px rgba($dark-color, 0.5),
0px 0px 0px 1px rgba($foreground-color, 0.15) inset;
}
// Component
.my_component {
@include sg_themed {
@include sg_foreground_background(.5, .75);
@include sg_box_shadow;
}
}
.another_component {
@include sg_themed {
@include sg_foreground_background(.25, .5);
@include sg_box_shadow(10px);
}
}
@nemoDreamer
Copy link
Author

You get Undefined variable: "$foreground-color". on line 23 at column 15, because SASS interprets from the inside out, so it's expanding the @include sg_foreground_background(.5, .75); directive before passing it as @content to the sg_themed mixin... 🐼

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