When working with my style.less
file, I begin by importing Bootstrap 3 .less
files and then proceed to customize some variables in order to generate the final 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; // overriding default value
@font-size-h1: floor(@font-size-base * 5); // originally 2.6 (46px) changed to 5
While customizing the @font-size-base
variable works as expected, I'm encountering an issue with @font-size-h1
(and similar ones like @font-size-h*
), which seems to be completely disregarded - it remains at 46px instead of the intended 90px after changing the multiplication factor from 2.6 to 5.
As a beginner in learning LESS, I'm wondering if there's something crucial that I might be overlooking?
UPDATE: Upon reviewing the type.less
file, I noticed that the @font-size-h1
variable is indeed utilized:
h1, .h1 { font-size: @font-size-h1; }