1

メディア クエリのミキシング インクルード内で設定されているスタイルを変更するのに問題があります。私はモバイル ファースト スタイルを作成してから、これらのメディア クエリ内でより大きな画面用のスタイルを宣言しています。

私が持っているドキュメントの上部にあります。

@mixin breakpoint($point) {
  @if $point == medium {
    @media (min-width: em(480)) { @content; }
  }
}


@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: em(800)) { @content; }
  }
}

次に、全体を通して、次のように記述されたスタイルがあります。

.col-1-4 {
    width: 100%;
    padding: 0;

    @include breakpoint(medium) {
        width: 50%;
        padding-right: em(10);

        &:nth-child(2n) {  
            padding-right: 0;
            padding-left: em(10);   
        }

    }

    @include breakpoint(large) {
        width: 25%;

        &:nth-child(4n) { 
            padding-right: 0;   
        }
   }

}

大規模なスタイルは希望どおりに表示されますmin-widthが、中程度のスタイルでは表示されません。

上部のミキシングを次のように切り替えると:

@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: em(800)) { @content; }
  }
}

@mixin breakpoint($point) {
  @if $point == medium {
    @media (min-width: em(480)) { @content; }
  }
}

スタイルは で変更されますが、 では変更されmin-width mediumませんlarge。

適用したいスタイルを目的の最小幅で有効にするにはどうすればよいですか?

コンパイルされた CSS は次のようになります。

.col-1-4 {
  width: 100%;
  padding: 0; }
  @media (min-width: 50em) {
    .col-1-4 {
      width: 25%; }
      .col-1-4:nth-child(4n) {
        padding-right: 0; } }

一番上のミックスインを交換すると、一番上に書かれたものだけがコンパイルされます。

どんな助けでも素晴らしいでしょう。

4

1 に答える 1

3

問題は、ブレークポイント mixin を 2 回定義しているため、最初の mixin が上書きされることです。

@mixin breakpoint($point) {
  @if $point == medium {
    @media (min-width: em(480)) { @content; }
  } @else if $point == large {
    @media (min-width: em(800)) { @content; }
  }
}
于 2013-10-25T13:23:40.007 に答える