[英]Color themes with SASS mixins
I'm trying to create two color themes with SASS with help of the following mixin: 我正在尝试在以下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;
}
}
}
And then just calling 然后打电话
@include theme("odd", $blue, $white);
@include theme("even", $green, $black);
inside my _layout.scss 在我的_layout.scss中
But I keep getting this error and can't figure out what's wrong with my mixin: 但是我一直收到此错误,无法弄清楚我的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 谢谢
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). 这似乎是您在theme
mixin中使用的一个mixin的问题(我怀疑它带有highlight
因为这似乎是唯一处理字体家族的问题(在错误跟踪中提到)。
Removing the calls to those other mixins, this: 删除对其他mixin的调用,这是:
@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. 这似乎是您想要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.