Is there a way to override a LESS variable inside a mixin?

Currently, I am incorporating LESS into one of my projects and I have a requirement to establish different color schemes for various users. The project involves developing a portal where the color scheme should change based on the type of user logging in.

Within my mixins.less file (which is immutable), I have defined the following:

@color-button-bg: #333;
@color-button-txt: #fff;
@color-button-fs: 1.5rem;
@color-button-fw: 500;
@color-button-hover-pct: 10%;

.base-btn-default(@type: button) {
    background: ~"@{color-button-bg}";
    border: 1px solid ~"@{color-button-bg}";
    color: ~"@{color-button-txt}";
    font-size: ~"@{color-button-fs}";
    font-weight: ~"@{color-button-fw}";
    &:hover, &:focus {
        @color-btn-hover: ~"color-button-bg";
        @color-btn-hover-pct: ~"color-button-hover-pct";
        background: darken(@@color-btn-hover,@@color-btn-hover-pct);
        border-color: darken(@@color-btn-hover,@@color-btn-hover-pct);
        color: ~"@{color-button-txt}";
    }
}

In a separate file containing client-specific mixins, I attempted the following approach:

/* Replace default color with theme color */
.theme-styling() {
  @color-button-bg: @main-theme-color;
}

Subsequently, my intention was to assign a class to the <body> tag and implement the color scheme based on that class name:

body.theme-a {
  #main-theme-color: teal;
  .theme-styling();
}

Regrettably, this method does not appear to be effective. I suspect it may be related to scoping or lazy evaluation, but given my limited experience with LESS, I am struggling to pinpoint the issue.

I have created a Codepen demonstration without utilizing separate files and in a slightly simplified manner: https://codepen.io/jewwy0211/pen/JVNZPv

cssless

Answer №1

After experimenting with your codepen, I discovered that the issue lies in not utilizing the variable defined within the mixin or the class containing the mixin.

For example, if you have 2 buttons like this:

<div class="wrapper one">
  <button>Theme 1</button>
</div>

<div class="wrapper two">
  <button>Theme 2</button>
</div>

You should call the theme-specific variable mixins in their respective classes and then use those variables within the same class as shown below:

.wrapper.one {
  .theme-styling-1();
  background-color: @color-button-bg;
}
.wrapper.two {
  .theme-styling-2();
  background-color: @color-button-bg;
}

/* Theme Vars */
.theme-styling-1() {
  @color-button-bg: teal;
}
.theme-styling-2() {
  @color-button-bg: red;
}

Check out this updated version on CodePen: https://codepen.io/mmshr/pen/OGZEPy

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

Creating an animated Gif using HTML and CSS styling

I am trying to create an effect where a .gif animation plays once when the mouse hovers over a specific image. I have one static image in PNG format and one animated gif. The goal is for the gif to play every time the mouse is hovered over the png image. ...

htmlcssanimation

Tips for maintaining consistent styles in CSS for multiple websites

I am currently working on developing a customizable chatbot widget using react. The goal is to create a chatbot widget that can be easily integrated into any website, similar to the functionality of rasa-webchat. During testing on some websites, I encount ...

htmlcssreactjsmaterial-ui

Is it feasible to place an image on top of a box?

Hello everyone, I have been trying to figure out how to achieve a specific layout in React. I am using MUI so there is no need for any hard-coded CSS. However, my attempts have not been successful so far. The layout I am aiming for consists of an image on ...

cssreactjsmaterial-ui

Styles in CSS for the first column of a table, with the exception of the first cell in

Here is the HTML code for a table: <table class='census'> <tr> <th colspan="2">My Title</th> </tr> <tr> <td colspan="2" class='chart'><SOME PIE CHART, GENERATED W ...

csscss-selectorshtml-tablefixed-width

Unusual CSS media queries behavior

During my project work, I faced a puzzling issue which can be illustrated with the following example: Here is the sample CSS code: *, *::after, *::before { box-sizing: border-box; margin: 0; border: 0; } @media only screen and (max-width ...

htmlcssmedia-queries

What is the best way to utilize the sx prop in Material UI for applying styles specifically when the component is active or selected?

In the code snippet below, I have set up the useState hook so that when a ListItem is clicked on, the selected state becomes true. My goal is to apply specific styling when an item is selected using the sx prop instead of creating a styled component for su ...

javascriptcssreactjsmaterial-uifrontend

Google Map with rounded corners that have a transparent design

Trying to create a circular Google map using CSS3 border-radius, but having issues with browsers other than Firefox. Here's the code snippet: <div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;"&g ...

cssgoogle-maps-api-3

Developing User-Friendly Websites with Responsive Design

While I was working on my project, I realized that using only pixel values in tables and sidebars was a big mistake. This caused issues because if someone had a different screen resolution, my website would look distorted and unappealing. Could you please ...

htmlcsslaravel-5responsive-design

What is the best way to horizontally center an image in Bootstrap 4 while having a fixed-top navbar and preventing vertical scrollbars?

I am struggling to achieve the desired outcome, which is depicted in this image: https://i.sstatic.net/i6X0j.jpg Specific requirements for this project include: The image must be responsive A fixed-top navbar should remain visible No vertical scrolling ...

cssbootstrap-4

Tips for creating a webpage with a spotlight effect using the mouse cursor

My goal is to create a webpage that is completely dark (as in night without any light at all) and have the mouse cursor emit a light effect to illuminate the surroundings. What tools or techniques should I use to achieve this unique effect? I've searc ...

csseffectslightingflashlightlight

CSS-only method for creating a fixed position sidebar with adjustable width

https://i.stack.imgur.com/e4Gsv.png I have a vision of creating something similar to the image above solely using CSS. The design must incorporate the following elements: The image-container will hold a 3x4 aspect ratio image, filling the available heig ...

htmlcssflexbox

The issue with the functionality of position absolute in CSS when used with JavaScript

<html> <head> <style> #wrapper{ position: absolute; top : 250px; width: 500px; height: 500px; border: 1px solid red; } .tagging{ position: absolute; border: 1px solid black; width : 20px; height: 30px; } & ...

javascriptcss

Positioning the close button on the top right edge of a Material-UI Dialog: A step-by-step guide

https://i.sstatic.net/ARTtq.png How can I include a close icon in the top right corner of the header section? I'm using the Material UI Dialog and everything works well, but I need a close button in the top section. Can anyone assist me with this? ...

javascripthtmlcssreactjsmaterial-ui

What are the implications of implementing this particular CSS code?

One common thing I come across on websites is this snippet of code: body:before { content: ""; width: 0; height: 100%; float: left; margin-top: -31700px; } What happens when this CSS is implemented? ...

htmlcss

What is the procedure for automatically playing the next audio track in HTML5 after the current one finishes playing

When trying to play a single MP3 file, the code below is designed to skip to a specific part of the track and then start playing from that position. However, despite the cursor moving to the correct spot in the MP3, it fails to play upon clicking the Sta ...

javascripthtmlcssecmascript-6ecmascript-2017

Troubleshooting: Unable to fetch CSS file in Node.js Express framework

I'm trying to access my .html file with localhost using node.js, but I'm facing an issue with loading the CSS that is included in the file. I am using the express framework for this purpose. Code: var express = require('express'); var ...

cssnode.jsexpress

Dynamic Column Image and Text Display

I am working on a website where I am trying to have an image on the left and a paragraph on the right, but when the screen size is reduced, I need the layout to switch so that the image is at the top and the paragraph is at the bottom. Even though I have ...

htmlcssflexboxresponsive

Using JQuery to iterate through every unique div id in the HTML document

i am attempting to utilize jquery to iterate through each div tag that has an id of "rate". The goal is for jquery to execute a function on the individual divs. Here is my code snippet: information.html <html> <input class="rate" type="hidden ...

javascriptphpjqueryhtmlcss

Inject CSS values dynamically

I am currently working on dynamically setting the color of a div. To provide some context, let's examine the following: <!doctype html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div clas ...

jqueryhtmlcssdynamicless

Stop vuetify from cluttering the global style scope

Seeking to embed a Vue component into another from an external source without using a Vue Plugin. The components are mounting correctly, but the embedded component's use of Vuetify is affecting the parent application's style. Visual examples can ...

cssvue.jswebpackvuetify.js