Having trouble modifying @font-size-h* in Twitter Bootstrap through LESS?

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; }

Answer №1

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

It appears that the output may vary depending on the compiler being used. Different Less compilers may have distinct precedence rules, leading to different results.

When using lessc 1.4.2 (LESS Compiler) [JavaScript], the result is: h1 { font-size: 100px; }. Although it's hard to pinpoint a specific reason for this outcome rather than h1 { font-size: 50px; }.

For more information, check out: https://github.com/twbs/bootstrap/issues/8947

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My presentations are not functioning as expected, could there be a problem with my HTML, CSS, or JavaScript coding?

My website utilizes a Slideshow feature to display images for blog posts. Recently, I attempted to include multiple slideshows within an article, which unfortunately caused all of the slideshows to malfunction. As it stands now, when the code is executed, ...

How can CSS be used to prevent line breaks between elements in a web page?

div#banner>img { float: left; background-color: #4b634b; height: 265px; width: 80%; } ul { float: left; background-color: #769976; width: 162px; } <body> <div id="wrapper"> <header> <nav> <ul ...

Trouble uploading document into mysql database

Creating a form in HTML using Bootstrap involves including specific elements for file uploads like this: <div class="form-group"> <label for="inputPic">Item Image</label> <input type="file" name="inputPic"> <p class= ...

Add a container element resembling a div inside a table without implementing the table layout

I am working with a table that is rendered by DataTable, and I have the requirement to dynamically append new elements inside the table like this: The dark grey area represents the new DOM elements that need to be inserted dynamically. The first row cont ...

Customize Bootstrap 4 scrollbar overflow with a sticky-top feature

Currently, I have a layout consisting of two rows: the first row is fixed to the top of the screen using sticky-top, and the second row fills the remaining height on the screen with min-vh-100. New content will be added dynamically to the second row's ...

What is the best way to align the second line of the title directly below the first line without using icons?

I am facing an issue where the icon and title are not aligning properly. When the title exceeds a certain length, it wraps under the icon instead of staying next to it. I need assistance in ensuring that the title always starts on a new line below the firs ...

I need to adjust the alignment of the text within my list item that includes a time element

I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized. I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Ins ...

Struggling to set up a css3 keyframe slide effect and seeking help to properly configure it. Check out the Fiddle for more details

I am looking to create a responsive version of the animation in this fiddle (link provided below). I want the animation to be 100% wide and have a height of 500px. However, when I adjust the width to 100%, it causes issues at the end of the animation. Can ...

SASS malfunctioning, error messages popping up in command prompt while running gulp serve

As I develop a web app using AngularJS and Gulp, I encounter an issue where the CSS does not seem to work when running 'gulp serve'. Despite attempting to reinstall various components like node_modules, Node.js, and Gulp, the same error persists. ...

Disabled text selection in Internet Explorer

I am in need of making one HTML element (Label) unselectable for IE. I have tried using the following methods: Unselectable=on onselectreturn=false; Unfortunately, none of these solutions are working for me. For Firefox and Chrome, I've successful ...

Predicting the width of an HTML element to smoothly transition its opacity and width using CSS - a helpful guide

Currently, I am facing a situation where I have a span node with an innerText that I will be changing at runtime. As I change the innerText, the offsetWidth of the node will also change based on the length of the future innerText. In order to handle CSS tr ...

Animating jQuery Counter with Changing Background Color

I've implemented a Counter that counts from 0 to a specified number, and it seems to be working perfectly. However, I want to add an animation where the background color of a div height animates upwards corresponding to the percentage of the counter. ...

Modifying the color of text within an element using CSS and the ::after pseudo

Is there a way to change the text color when a user hovers over it without interfering with the background effect? I currently have a hover effect set to show a background section when hovering over the text, but when I try to change the text color separat ...

How to ensure the right size for your sections in HTML5

I am currently learning HTML5 and attempting to create a specific sized section in the browser where various elements like buttons and text will be displayed based on user interaction. However, I am running into an issue with adjusting the size of the sect ...

Modifying jQuery CSS causes certain CSS rules from a file to be deleted

When using jQuery to change the css of an element, I've noticed that it can remove some previously specified css rules for that element. For example, .className, .className2, etc... { background-color: black; color : silver; } .className: ...

The header grid will disappear in the p-dialog when the browser is minimized

Check out this informative article on creating a dynamic dialog box using PrimeNG here Take a look at the image below to see how the dialog box appears when opened: https://i.sstatic.net/nUq1d.png One issue I am facing is that the grid header gets hidd ...

How to retrieve the CSS padding-left value using jQuery in Internet Explorer

Having trouble retrieving the css padding-left value using jQuery when the css is not inline. This issue seems to be specific to Internet Explorer (tested on versions 8 and 9). I am looking to display this value like so: alert($content.css("padding-left" ...

The CSS perspective shape link is not functioning correctly

I'm attempting to create a trapezoid shape using CSS to contain a link, but it doesn't seem to be functioning correctly. I'm unsure if it's due to lack of support or if there's an issue with the code itself. It looks like it should ...

Fast method or tool for generating a detailed CSS element list from deeply nested elements

I have been using Chrome dev tools to work on a code base that was not created by me. There are numerous deeply nested elements scattered throughout the code. I find myself having to manually search through the HTML structure in order to select them with ...

What is the reason that object-fit does not affect the width or height?

I am facing an issue with an image in a div where the image is not resizing properly when using object-fit: contain. The width of the image remains unchanged, causing padding to appear around it. https://i.stack.imgur.com/D0wym.png Is there a way to make ...