1

我的网站有一个字体大小的全局变量，如下所示：

@default-fontsize : 12px;

今天我了解到我的项目也将使用阿拉伯语和中文，并且这两个站点的字体大小必须增加 2px。这将导致：

@default-fontsize : 14px;

因为我不想更改我的变量，所以我在 body 标签上放了一个 ID，我想这样做，但它不起作用：

#foreign-language { font-size: (@default-fontsize + 2); }

有谁知道这个问题的解决方案？

4

1 回答 1

1

如果我理解正确，您真的不想将 id 定位为仅更改其大小，这就是您的原始代码...

#foreign-language { font-size: (@default-fontsize + 2); }

...确实，通过将 css 生成为：

#foreign-language {
  font-size: 14px;
}

我相信您真正想要的是更改它，@default-fontsize以便它在您的 LESS 代码中传播到其他地方。现在，您不能通过使用 id 来做到这一点，因为当代码查看body元素上的 id 时，LESS 已经编译为静态 CSS。您需要已经知道在编译阶段是否要向浏览器提供一组外语准备的 CSS。

现在，您可以使代码灵活，以便一旦您知道是否正在修改它，您就可以告诉它更改值。你可以用 mixin 做这样的事情：

.setFontSize(@addSize: 0) { 
  @default-fontsize: 12px + @addSize;
}

然后只调用以下两个中的一个，具体取决于您正在处理的语言集：

.setFontSize(); //do this normally
.setFontSize(2); //do this to increase it for those you need to

然后在需要的地方使用变量：

body {
  font-size: @default-fontsize;
}

同样，这不是可以根据身体是否有foreign-languageid 使用 LESS “即时”完成的事情。相反，如果你知道你正在处理外语，你需要告诉 LESS 以不同的方式编译。您可以设置一个全局变量，例如：

@addFontSize: 0; //change to 2 when dealing with a foreign language

然后只需像这样对 mixin 进行一次调用：

.setFontSize(@addFontSize); //will change based off your global variable setting
于 2013-03-14T22:38:47.753 回答