Scope SASS与布尔变量混合：If语句不起作用

我正在创建一个mixin，其中设置

$元素的
$属性的样式，以生成特定于页面的CSS。（背景：共有四页，颜色不同）

不工作混音（使用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".)

错误：

@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:”有帮助。为什么？
消息错误可能令人困惑，但您有语法错误。它应该是
@else
而不是
else
您需要在
@if
子句之外定义一个默认的
$pages
。

这是一个范围问题。。。
@if
子句的作用域比您的mixin更窄。。。因此，内部定义的任何内容都是该范围的私有内容

试着这样做：

@mixin themify($element, $property, $color-light: false) {
    $pages: ();
    @if $color-light == true { // boolean check not string
        $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);

我制作了一个小函数来正确检查布尔值（至少对我自己而言）


这实际上是一个输入错误，在我的代码中不存在。非常感谢。这不能解决我的问题。是的，没错。之前已经更新了我的问题。为什么需要这样做？另外，在检查布尔值作为字符串时要小心。在这种情况下，作为参数传递（true）会导致检查失败；比较==真而不是“真”应该更安全！另一种避免原始错误的方法是为变量
$pages
设置默认状态，并且仅当
$color light
为
true
时才更改该值。这将减少3行代码，因为不需要
@else
语句。原始状态应该是较暗的版本，如果
true
，则将值更改为较亮的版本。是否将您编写的代码包含在答案中，以便在站点不可用时可用？