我正在创建一个mixin,其样式为$element
,$property
以生成特定于页面的CSS。(背景:有四页具有不同的配色方案)。
不起作用的mixin(带有if语句):
@mixin themify($element, $property, $color-light: false) {
@if $color-light == "true" {
$pages: home forestGreen, about darkOrange, work dodgerBlue, contact fireBrick;
}
@else {
$pages: home darkGreen, about orange, work royalBlue, contact crimson;
}
@each $page in $pages {
.page--#{nth($page, 1)} .#{$element} {
#{$property}: nth($page, 2);
}
}
}
/* Call the mixin */
@include themify(site-nav, background-color, $color-light: true);
错误:
error/style.scss (Line 47 of css/ui/_misc.scss: Undefined variable "$pages".)
更新资料
$pages: "";
在if语句之前添加。为什么?
您需要
$pages
在@if
子句外定义一个默认值。这是一个范围问题...该
@if
子句的范围比您的mixin窄...因此内部定义的任何内容对该范围都是私有的。像这样尝试:
演示