0

@media-query で使用される mixin でグローバル変数を使用すると問題が発生します。ポイントは別の @media-query で変数が書き換えられていることです。したがって、ミックスインで更新された値を使用したいのですが、そうではないようです。

これが私を悩ませているものです:

@base-font-size: 18px;
@modifier: 7;

// font size for elements that are not headings
// if I pass "clean" as second arg then the line-height will be same as font size
// dont focus on it - @modifier is the problem

.font(@size, @line-height) when (@line-height = clean) {
  font-size: @size;
  line-height: @size;
}

.font(@size, @line-height: true) when not (@line-height = clean) {
  font-size: @size;
  line-height: unit((@size + @modifier), px);
}

body {
  .font(@base-font-size);
}



@media (max-width: 800px) {
  @base-font-size: 18px;
  @modifier: 5;

  body {
    .font(@base-font-size);
    color: red;
  }
}

コンパイルすると次のようになります。

body {
  font-size: 18px;
  line-height: 25px;
}
@media (max-width: 800px) {
  body {
    font-size: 18px;
    line-height: 25px;
    color: red;
  }
}

@media の @modifier 値が変更されました。@media で次のように使用したい場合: line-height: @modifier+@base-font-size 新しい値が使用され、すべて問題ありません。

しかし、この新しい値を mixin で使用し、この mixin を @media で使用したい場合、この mixin は新しい値 (5) ではなく古い値 (7) を使用しています。

私が間違いを犯した場所と、バグが少ない場合(1.3.3)、ミックスインを変更して回避する方法を教えてください。

4

1 に答える 1