媒体查询中较少的全局变量和mixin使用

Question

在@ media-query中使用的mixin中使用全局varibale时出现问题。 点在不同的@ 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）如何改变我的混合，以避免它？

Answer 1

我解决了这个问题。

我需要定义一个更多的var：@media并更改我的mixins，以便它们将在特定情况下使用或不会使用。

@media：desktop;

@base-font-size: 10px; 
@mod-desktop: 10; 
@mod-mobile: 1px; 

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

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

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

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


body { 
    .font(@base-font-size); // this will use font-size from top of the file 
} 

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

    body { 
    // this will use the font-size from @media scope and mixin for mobile will be called 
    .font(@base-font-size); 
    } 
}