Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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;
.sg_dark_theme & {
$foreground-color: $light-color;
$background-color: $dark-color;
@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);

This comment has been minimized.

Copy link
Owner Author

nemoDreamer commented Jun 11, 2015

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
You can’t perform that action at this time.