Question

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

媒体查询中的全局变量和混合使用量减少

1 个答案: