1

私を狂気に駆り立てているSassの問題を手に入れました。基本的に、次の Sass コードがあります。

$breakpoints: mobile 320px, tablet 760px, desktop 960px;

@mixin setbreakpoint($point) {
    @each $breakpoint in $breakpoints {
      @if $point == #{nth($breakpoint, 1)} {
        @media (min-width: #{nth($breakpoint, 2)}) { @content; }
      }
    }
}

.page-wrap {
  width: 75%;
  @include setbreakpoint(mobile) { content:"mobile"; }
  @include setbreakpoint(tablet) { content:"tablet"; }
  @include setbreakpoint(desktop) { content:"desktop"; }
}

@each $breakpoint in $breakpoints {
    .page-wrap-#{nth($breakpoint, 1)} { content:#{nth($breakpoint, 2)}; }
}

次の css を出力します。

.page-wrap {
  width: 75%; }
  @media (max-width: 320px) {
    .page-wrap { content: "mobile"; } }
  @media (max-width: 760px) {
    .page-wrap { content: "mobile"; } }
  @media (max-width: 960px) {
    .page-wrap { content: "mobile"; } }
  @media (max-width: 320px) {
    .page-wrap { content: "tablet"; } }
  @media (max-width: 760px) {
    .page-wrap { content: "tablet"; } }
  @media (max-width: 960px) {
    .page-wrap { content: "tablet"; } }
  @media (max-width: 320px) {
    .page-wrap { content: "desktop"; } }
  @media (max-width: 760px) {
    .page-wrap { content: "desktop"; } }
  @media (max-width: 960px) {
    .page-wrap { content: "desktop"; } }

.page-wrap-mobile {
  content: 320px; }

.page-wrap-tablet {
  content: 760px; }

.page-wrap-desktop {
  content: 960px; }

質問: 各ループの mixin が 9 つの結果を生成するのはなぜですか? 基本クラスの各ループは 3 つの結果を生成します。

4

1 に答える 1

2

これは、ここに if ステートメントがあるためです。

@if $point == #{nth($breakpoint, 1)} {
    @media (min-width: #{nth($breakpoint, 2)}) { @content; }
}

変数を異なる型と比較しています。何らかの理由で、コンパイラは常にそれらが等しいと考えています。文字列補間を削除するだけで、期待どおりに機能します。

@if $point == nth($breakpoint, 1) {
    // You don't need when displaying the value either...
    @media (min-width: nth($breakpoint, 2)) { @content; }
}
于 2013-01-29T14:10:22.057 に答える