在 @media-query 中使用的 mixin 中使用全局变量时,我遇到了问题。点在不同的@media-query 中,变量被重写。所以我希望 mixin 使用更新的值,但它似乎没有这样做。
这是困扰我的问题:
@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 中使用这个新值并在 @media 中使用这个 mixin 时 - 那么这个 mixin 使用的是旧值(7)而不是新值(5)。
谁能告诉我我在哪里犯了错误,如果是一个较少的错误(1.3.3)如何改变我的mixin来避免它?