type-of和type-of为false，仍然传递为true

问题描述

我的目标是扩展我的SASS媒体查询mixin，使其具有不同的输入变化。

@media(medium)

@media([small,to-large])

@media([[small,to-large],[small,landscape]])

但是我对if语句有疑问。我很困惑为什么它通过了，即使它是错误的。想法，我在做什么错了？

@if (type-of($queries) == "list" and type-of(nth($queries,1) == "list")) {
  // do something
} @else {
  // do something
}

这是通过的查询，即使它是错误的

.block {
  @include media([small,to-large]) {
    background-color: blue;
  }
}

完整示例

@mixin media($queries,$only-screen: false) {
  $media-query: "";

  $media-query: if($only-screen,"only screen and ","");

  @debug type-of($queries) == "list" and type-of(nth($queries,1)) == 'list';
  @debug type-of(nth($queries,1));

  @if (type-of($queries) == "list" and type-of(nth($queries,1) == 'list')) {
    @debug 'hey';
    
    @for $p from 1 through length($queries) {
      $array: nth($queries,$p);

      $media-query: $media-query + composeMediaQuery($array);

      @if ($p < length($queries)) {
        $media-query: $media-query + ",";
      }
    }
  } @else {
    $media-query: composeMediaQuery($queries);
  }

  @if ($media-query) {
    @media #{$media-query} {
      @content;
    }
  } @else {
    @warn "There is no query please check your input to the @include media()";
  }
}

@function composeMediaQuery($array) {
  $media-query: "";

  @for $i from 1 through length($array) {
    $query: inspect(map-get($media-queries,nth($array,$i)));

    @if ($query) {
      @if ($i == 1) {
        $media-query: $media-query + $query;
      } @else {
        $media-query: $media-query + " and " + $query;
      }
    } @else {
      @warn "Unfortunately,no value could be retrieved from `#{$media-queries}`. "
            + "Please make sure it is defined in `$media-queries` map.";
    }
  }

  @return $media-query;
}

$media-queries: (
  to-small: (
    max-width: 766px
  ),small: (
    min-width: 767px
  ),to-medium: (
    max-width: 991px
  ),medium: (
    min-width: 992px
  ),to-large: (
    max-width: 1199px
  ),large: (
    min-width: 1200px
  ),to-x-large: (
    max-width: 1599px
  ),x-large: (
    min-width: 1600px
  ),grid-two: (
    min-width: 767px
  ),grid-three: (
    min-width: 1010px
  ),grid-four: (
    min-width: 1340px
  ),docked-cart: (
    min-width: 1700px
  ),min-width-docking: (
    min-width: 1680px
  ),target-ie: (
    -ms-high-contrast: none
  ),landscape: (
    orientation: landscape
  ),portrait: (
    orientation: portrait
  )
);

.block {
  @include media([[small,[landscape,to-medium]]) {
    background-color: blue;
  }
  
  @include media([small,to-large]) {
    background-color: blue;
  }
}

如果要检查编译后的输出和控制台，请链接到codepen。

解决方法

奇怪的事情，但是在@if中使用它之前，我必须设置条件的变量。

$ifNestedList: type-of($queries) == "list" and type-of(nth($queries,1)) == 'list';

  @if ($ifNestedList) {
    @for $p from 1 through length($queries) {
      $array: nth($queries,$p);

      $media-query: $media-query + composeMediaQuery($array);

      @if ($p < length($queries)) {
        $media-query: $media-query + ",";
      }
    }
  } @else {
    $media-query: composeMediaQuery($queries);
  }