How can you declare variables in CSS using LESS?

I am facing a challenge where I need to dynamically change the branding color and other styling variables on the portal based on certain conditions at runtime. I have successfully implemented this functionality using CSS with the code snippet provided below. However, our CSS is generated from LESS files during compilation, making it difficult for me to figure out how to write similar logic in LESS to achieve the same result as shown in the code snippet:

:root {
    --brand-color: yellow;
}

h1 {
    color: var(--brand-color);
}

<h1 id="demo">Hello</h1>
<button onclick="myFunction()">Click me</button>

function myFunction() {
    document.documentElement.style.setProperty('--brand-color', 'red');
}

Answer №1

@blue-color: blue;
@green-color: green;

h2{
  color: @blue-color;
  &.green-color{
    color: @green-color;
  }
}

Apply classes now

function applyClasses(){
  $("myelement").addClass("green-color");
}

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

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

I have a main layer with multiple layers stacked on top of it. I need the second layer to extend its width to match the body's width. Main Project: http://example.com What I've tried: I looked into: Solution for matching div width with body ...

Problem with responsive design on iPhone

I'm currently working on developing a responsive chatbot using CSS Bootstrap. However, I've encountered an issue where the header and footer are not fixed when I open the app on an iPhone. The keyboard header is also moving up the screen, which s ...

I am seeking a way to conceal list elements according to a specified string input using JavaScript

Looking at the list items inside this div: <div class="container"> <h2>Vanishing Act Game</h2> <div> <li class="list-group-item go" id="item">Door#1</li> <li class="list-group-item go" id="it ...

Creating distance between two text boxes in bootstrap is easy with the use of margins. By

I am looking to create a small white space between two text boxes. <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="row col-lg-12 col-sm-12"> <div class ...

What could be causing my <UL> to not properly expand around the <LI> items inside of it?

I am currently working with WordPress and have created a menu using a list structure. Here is an example of how it looks: <ul> <li>Home</li> <li>About</li> <li>ParentItem <ul> <--- The heig ...

Image not showing correctly after closing the bootstrap modal

I am currently working on creating a gallery with hover effects for each image, similar to the one found here. My goal is to have a Bootstrap modal open when I click on a link within the hovered image, displaying additional content. Everything seems to be ...

Enhance the appearance of the standard black rectangle displaying the messages "No video source" or "No video permissions"

Is there a way to change the styling of the video element that appears as a black rectangle with a strikethrough play button when the user is prompted for permission on Safari? Does it have a specific ID, class, or tag that can be targeted? I'm curre ...

What is the best way to align a jQuery Cycle 2 Slider in the middle of the

Having some trouble centering a jQuery Cycle 2 Slider on my page. You can see the slider here. I've attempted multiple methods to center it, but none have been successful. Check out the HTML code: <div class="slider"> <div id=outside> ...

Limiting text based on the space it occupies

Is it feasible to restrict the number of characters allowed in an input field based on the space they occupy? For instance, W's and M's require enough space for 34 of them. However, regular sentences of the same length only take up about half a ...

Tips for directing the scroll according to the current selection class

I am attempting to focus the scroll based on the selected class when clicking on the previous and next buttons. How can I achieve this functionality? Please review my code on https://jsfiddle.net/kannankds/bcszkqLu/ <ul class="kds"> <li>tile ...

<h1> </h1> Using attributes in a JavaScript function

Hello, I am trying to figure out how to inherit the h1 style CSS inside a JavaScript function called myFunction. Currently, when the button is clicked, it just displays the default h1 style. Any help would be appreciated. Thank you! <html> <st ...

How to style Angular Material Dropdowns: Trimming the Left and Right Sides using CSS

Seeking to customize Angular Material Select to resemble a basic dropdown. Even after applying the disableOptionCentering, the dropdown list options still expand from the left and right sides (refer to Current picture below). The desired look would involve ...

How to remove previous and next buttons in product carousel using Bootstrap 3.3.5

Currently, I am tackling a small project and venturing into the world of bootstrap for the first time. I have hit a roadblock when it comes to disabling (not hiding) product carousel controls when the active state is on the item:first & item:last classes. ...

The integration of Angular CLI with SCSS is no longer a separate process -

It seems like I might be overlooking something very straightforward here. After a fresh installation of angular-cli, I created a new website with SCSS. I input the SCSS in the global style.scss as well as some in a component SCSS file. However, when I se ...

Tips for updating the background color of a select option

I'm looking to customize the background color of select options in my Bootstrap 4 form. Can anyone provide guidance on how to achieve this? `` <div class="form-group "> <select class="form-control > <option va ...

Update a variety of CSS properties simultaneously

Is it possible to change multiple CSS attributes of an element with just one line of code? Currently, if I want to alter various CSS attributes of an element, I have to write separate lines of code for each attribute. For instance: $("div#start").cli ...

Aligning text to the left center

I am looking to center left-aligned text in the yellow box (txtbox). The current look is like this: and I want it to appear like this: HTML: <div class="content container small"> <div class="txtbox"> ...

Utilizing a Font Squirrel-provided font within Twitter Bootstrap using LESS styling techniques

I'm currently working on integrating a custom font generated from Font Squirrel as the base font for Twitter Bootstrap (compiled from LESS files). My setup involves Express.js with Node.js, and I have already added the font files to the designated fon ...

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Check out this informative article here I'm looking for a way to gather the values from all the text boxes and store them in an array within my JavaScript form. I attempted to enclose it in a form, but I'm struggling to retrieve the HTML ID beca ...

Using "bottom: 0" does not function properly in Firefox when using fixed positioning

I'm working on a basic webpage that includes a textarea element which I want to expand to fill the entire screen, leaving a small gap at the top. Everything looks great in Chrome, but in Firefox, the textarea doesn't stretch all the way to the bo ...