Color themes with SASS mixins

Question

I'm trying to create two color themes with SASS with help of the following mixin:

@mixin theme($name, $bgColor, $textColor) {
  .#{$name}{
    blockquote {
       @include borderLeft($textColor, $basicUnit/2);
    }
    strong {
        @include doubleFrame($bgColor, $textColor, 1px);
    }
    .highlighted {
        @include highlight($textColor);
    }
    .bb-custom-side.left .content-title {
        color: $textColor;
    }
    .content > h2 {
        border-top:$basicUnit/2 solid $bgColor;
    }
    .content { 
        background: $bgColor;
        color: $textColor;
    }
  }
}

And then just calling

@include theme("odd", $blue, $white);
@include theme("even", $green, $black);

inside my _layout.scss

But I keep getting this error and can't figure out what's wrong with my mixin:

Syntax error: Invalid CSS after "...ily : "#{$name}": expected string, was "_#{$nameWeight}"";"
        on line 31 of /Users/Works/html/assets/scss/_typography.scss
        from line 11 of /Users/Works/html/assets/scss/main.scss
Use --trace for backtrace.

A newbie question...

Thanks

Answer 1

This seems to be an issue with one of the mixins you are using within your theme mixin (I suspect it is with highlight as that seems to be the only one dealing with font-family (mentioned in the trace of the error).

Removing the calls to those other mixins, this:

@mixin theme($name, $bgColor, $textColor) {
  .#{$name}{
    .content { 
        background: $bgColor;
        color: $textColor;
    }
  }
}

@include theme("odd", 'blue', 'white');

Produces this:

.odd .content {
  background: "blue";
  color: "white";
}

Which seems to be what you want.

Codepen