无法使用 LESS 在 Twitter Bootstrap 中重新定义 @font-size-h*？答案

【问题标题】：Cannot re-define @font-size-h* in Twitter Bootstrap using LESS?无法使用 LESS 在 Twitter Bootstrap 中重新定义 @font-size-h*？
【发布时间】：2013-10-12 08:36:47
【问题描述】：

我的style.less 导入Bootstrap 3 .less 文件，然后自定义一些变量以输出style.css：

@bs-less: "../../vendor/twbs/bootstrap/less";

// Core variables and mixins
@import "@{bs-less}/variables.less";
@import "@{bs-less}/mixins.less";

// Core CSS
@import "@{bs-less}/type.less";

// Customizations
@font-family-sans-serif:  "Open Sans Condensed", sans-serif;
@font-size-base: 18px; // override working
@font-size-h1:  floor(@font-size-base * 5); // originally 2.6 (46px) changed to 5

自定义@font-size-base 变量可以像@font-family-sans-serif 一样正常工作。

我遇到的问题是@font-size-h1（更普遍的是@font-size-h*），它被完全忽略，即46px，但应该在90px左右。我将乘法从 2.6 更改为 5。

我刚刚开始学习 LESS，有什么我缺少的吗？

编辑：在type.less变量@font-size-h1中实际使用：

h1, .h1 { font-size: @font-size-h1; }

【问题讨论】：

另请注意：getbootstrap.com/getting-started/#accessibility（嵌套标题）
您是否尝试将自定义设置放在 Core CSS 导入之前？它真的不应该对LESS产生影响，但我很好奇它是否能解决你的问题。据我所知，您的代码应该可以正常工作。
@ScottS 我明天试试，谢谢你的帮助。

标签： css twitter-bootstrap less twitter-bootstrap-3

【解决方案1】：

@font-sizer: 10;
.test(@fs){font-size:@fs*5px;}
h1{.test(@font-sizer)}
@font-sizer: 20;

结果似乎取决于您的编译器。更少的编译器可能有不同的优先规则？

上面使用lessc 1.4.2 (LESS Compiler) [JavaScript] in: h1 { font-size: 100px; } 的结果我可以找到一个原因（明确的规则）为什么结果不应该是h1 { font-size: 50px; }

另见：https://github.com/twbs/bootstrap/issues/8947

【讨论】：

至于为什么你的回答结果是100px而不是50px，这是因为第二个@font-sizer优先（覆盖第一个），所以h1里面的调用等于.test(20)。这就是 LESS 的工作方式，无论代码顺序如何，变量都会被覆盖。也就是说，@font-sizer 在h1 mixin 调用之前被覆盖，即使h1 代码在代码中的第二个@font-sizer“之前”，它不是“之前”它在操作计算。首先解析所有变量。
@ScottS 是的，谢谢，我明白了。我在哪里可以找到这个优先级的文档？
即没有任何“优先级”，最后一个变量定义总是覆盖任何 prev。同一范围内的定义。另请参阅Last Declaration Win。
谢谢，我确实学到了很多东西。读完这些东西后我还是不明白@gremo 的结果