kleinfreund kleinfreund - 1 month ago 14
Sass (Sass) Question

SASS mixin with boolean variable: If-Statement not working

I'm creating a mixin which styles an

$element
's
$property
to generate page-specific CSS. (Background: There are four pages with different color schemes).

Not working mixin (with if-statement):

@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:

error/style.scss (Line 47 of css/ui/_misc.scss: Undefined variable "$pages".)


Update



Adding
$pages: "";
before the if-statement helps. Why?

Answer

You need to have a default $pages defined outside the @if clause.
It is a scope issue ... the @if clause is a narrower scope than your mixin ... so anything defined inside would be private to that scope.

Try it like this:

@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

Comments