web-dev-qa-db-ja.com

ブール変数を使用したSASSミックスイン：If-ステートメントが機能しない

$elementの$propertyをスタイル設定して、ページ固有のCSSを生成するミックスインを作成しています。 （背景：配色の異なる4ページあります）。

ミックスインが機能しない（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".)

更新

Ifステートメントの前に$pages: "";を追加すると役立ちます。どうして？

scopesassmixins
14
kleinfreund

デフォルトの$pagesを@if句の外で定義する必要があります。
これはスコープの問題です...@if句はミックスインよりも狭いスコープです...したがって、内部で定義されたものはすべてそのスコープにプライベートになります。

このように試してください：

@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);

[〜＃〜]デモ[〜＃〜]

24
Martin Turjak

メッセージエラーは混乱を招く可能性がありますが、構文エラーがあります。そのはず @elseelseではありません。

1
Wojciech Bednarski

ブール値を適切にチェックするための小さな関数を作成しました（少なくとも私自身は）

http://www.sassmeister.com/Gist/a72a18f259c9c18ab773300b197bd08a

  // ----
  // libsass (v3.3.6)
  // ----

  // CHECK BOOLEAN VALUE
  @function bool($value: false) {
      @if $value == false or 
          $value == "" or 
          $value == "false" or 
          $value == 'false' or
          $value == 0 {
              @return false;
          }
      @return true;
  }


  // Lets test
  $var1: false;

  @if bool($var1) == true {
    /* This value is true */
  } @else {
    /* This value is false */
  }
0
Vladimir Jovanović