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

Question

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

和link到codepen，如果你想检查编译输出和控制台。

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

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

type-of and type-of is false, still passes as true

html

css

sass

scss-mixins