具有布尔变量的SASS mixin：If语句不起作用

范围 CSS

飞云

2020-04-03

我正在创建一个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语句之前添加。为什么？

第3909篇《具有布尔变量的SASS mixin：If语句不起作用》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

凯西里 2020.04.03

您需要$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);