@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)、ミックスインを変更して回避する方法を教えてください。