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

【问题标题】：Less global variable and mixin usage in media-queries在媒体查询中使用较少的全局变量和 mixin
【发布时间】：2013-05-18 20:20:04
【问题描述】：

在 @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来避免它？

【问题讨论】：

标签： less media-queries scope

【解决方案1】：

我已经解决了。

我需要再定义一个 var: @media 并改变我的 mixin，以便它们将或不会在特定情况下使用。

@media：桌面；

@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); 
  }
}

【讨论】：