SASS mixin与布尔变量:If-Statement不起作用

Question

我创建一个混合的哪些样式$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语句帮助之前添加.为什么？

Answer 1

您需要$pages在@if子句外定义默认值.
这是一个范围问题......该@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);

DEMO