帶有SASS mixins的色彩主題

Question

我正在嘗試在以下mixin的幫助下使用SASS創建兩個顏色主題：

@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;
    }
  }
}

然后打電話

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

在我的_layout.scss中

但是我一直收到此錯誤，無法弄清楚我的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.

一個新手問題...

謝謝

Answer 1

這似乎是您在theme mixin中使用的一個mixin的問題（我懷疑它帶有highlight因為這似乎是唯一處理字體家族的問題（在錯誤跟蹤中提到）。

刪除對其他mixin的調用，這是：

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

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

產生這個：

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

這似乎是您想要的。

Codepen