类型of和类型of是false，仍然传递为true。

Question

我的目标是扩展我的SASS媒体查询混合器，使其有不同的输入。

@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, to-large], [landscape, to-medium]]) {
    background-color: blue;
  }
  
  @include media([small, to-large]) {
    background-color: blue;
  }
}

​

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

Answer 1

奇怪的是，在@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);
  }