0

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

4

1 回答 1

0

我已经解决了这个问题。

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

@媒体：桌面；

@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); 
  }
}
于 2013-05-18T12:20:04.180 回答