LessCSS:变量前面的ID

时间:2013-03-14 20:10:48

标签: css variables less

我的网站有一个字体大小的全局变量,如:

@default-fontsize : 12px;

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

@default-fontsize : 14px;

由于我不想改变我的变量,我在身体标签上加了一个ID,我想这样做,但它不起作用:

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

任何人都知道解决方案吗?

1 个答案:

答案 0 :(得分: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;
}

同样,这不是可以“在运行中”完成的事情,LESS基于身体上是否有foreign-language id。相反,如果你知道你正在处理外语,你需要告诉LESS不同的编译方式。您可以设置一个全局变量,如:

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

然后只需要一次调用mixin:

.setFontSize(@addFontSize); //will change based off your global variable setting