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);

在 my _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，因为它似乎是唯一一个处理font-family的人（在错误的痕迹中提到。）

删除对其他mixins的调用，这个：

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

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

产生这个：

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

这似乎是你想要的。

<强> Codepen

SASS mixins的色彩主题

1 个答案: