Minimize the use of globalized variables in your LESS CSS code

Is there a better way to avoid using globally diffused variables?

I conducted a test with the following setup:

_import.less

@test: #FFF;

_import2.less

@test: #000;

test.less

@import (reference) "_import";

body {
    background: @test;
}

test2.less

@import (reference) "_import2";

div {
    background: @test;
}

index.less

@import "test";
@import "test2";

Even though when I compile lessc index.less test.css, the result remains as follows:

body {
  background: #000;
}
div {
  background: #000;
}

However, my desired output is:

body {
  background: #FFF;
}
div {
  background: #000;
}

I have tried using both less 2.7 and 3.9, but encountered the same behavior.
Does anyone have a solution for this issue?
Thank you.

Answer №1

If you want to limit the scope of something, like an imported file, you can always use an "unnamed namespace" aka & {} block.

For example:

style.less:

@import "_import-file";

body {
    background: @color;
}

style2.less:

@import "_import-file2";

div {
    background: @color;
}

main.less:

& {@import "style";}
& {@import "style2";}

Depending on your needs, these & {} blocks can also be placed directly inside the style files themselves.

---

Source: Local Variable Scoping in Import Files

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

Centering loaders within elements of an unordered list

I am working on a navbar that uses Bootstrap 3 and AngularJS. Within this navbar, I have an unordered list with li elements. Below is a snippet of my navbar: https://i.stack.imgur.com/o75Lp.png This is the code for my navbar: <div class="navbar-head ...

Is it possible to sanitize user input without relying on !important?

Utilizing wp_editor, I have implemented a front-end form on my WordPress website for users to post without accessing the admin section. Although it is functional, there is a concern that users may copy and paste content with inline styles that could disrup ...

The linking process in AngularJS is encountering difficulties when trying to interact with

I've already looked at similar questions, and my code seems correct based on the answers provided. It's a very simple beginner code. <html ng-app=""> <head> <title>Assignment</title> <script src=" ...

Menu options arranged vertically, revealing submenus that fly out upon mouse hover

I am attempting to develop a vertical menu with flyouts, which includes sub-menus. Can you point out any issues in the code provided below? <html> <head> <title>Untitled Document</title> <style type="text/css ...

Conceal the ::before pseudo-element when the active item is hovered over

Here is the code snippet I am working with: <nav> <ul> <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li> <li><a href="javascript:void(0)" class="menuitem"> ...

Unable to transfer card from the top position in the screen

Utilizing Tailwind (flowbite) for the frontend of my project, I encountered an issue where the Navbar was overlapping the Card. I attempted using mt-8 to resolve the problem, but it did not yield significant changes. What adjustments should I make to achi ...

Animate a jumping figure using jQuery

Is it possible to create an animation of a person jumping from the bottom of the screen to the top, with the scroll bar following them? I have my doubts but would love to know if it can be done. If you want to see what I mean, check out this PDF: http:// ...

Set the height of the vertical scroll at a fixed 100% floatValue

Check out my creation at http://jsfiddle.net/ZygnV/ html, body { margin: 0; padding: 0; height: 100%; } .main-content-wrapper { height: 100%; overflow-y: hidden; white-space: nowrap; } .main-sidebar { display: inline-block; height: 1 ...

Tool for controlling the layout of the viewport with Javascript

I have experience using ExtJS in the past to create dashboards, and one of my favorite features is the full-screen viewport with a border layout. This allows for easy splitting of a dashboard into panels on different sides without creating excessive scroll ...

Customize the colors of the arrows in Bootstrap's carousel

There seems to be a simple solution that I'm missing here. I have images with white backgrounds and I want to customize the arrows on Bootstrap's Carousel to make them more visible. I need help changing the color of the arrows (not the background ...

What can be done to stop a header from sticking to a table and displaying horizontally scrolling content along the border?

I need to ensure that the red headers do not overlap with the blue headers' borders while scrolling horizontally. It is essential for me to have a white border on the blue headers. .container { overflow: auto; width: 200px; } table { borde ...

Displaying a background image in Laravel using the storage directory

Can anyone offer some guidance on how to load a background image from storage? I have tried using the following code with normal img src, but it doesn't seem to work with background images. background-image: url({{ Storage::get("{$post->image}") } ...

Can the loaded image from the css sprite be displayed on the screen?

My webpage is designed to load two images from a CSS sprite using the following code: <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div class="arrow low"></div> ...

Chrome distorts background images with CSS when resized

One thing I noticed is that Chrome seems to display CSS background-images differently compared to using the <img /> tag. I tested two identical images resized to the same dimensions The first image set as a CSS background-image appeared pixelated W ...

Creating a Mobile-Friendly Centered Navigation Bar with Scroll Functionality Using Bootstrap 4 Alpha 6

Currently, I am working with the standard Bootstrap navbar that has the class="justify-content-center". My goal is to make this navbar scrollable when the elements do not have enough space. The issue I'm facing is that I can only scroll to the right a ...

Tips for Showing Empty Data in a Nonexistent `<td>` Element within a Table

This particular query appears to be quite simple... I am seeking the HTML code for creating a table: <table> <tr> <th>Heading 1</th> <td>or</td> <th>Heading 2</th> </tr> <tr> ...

Div with sidebar that sticks

I am currently working on setting up a website with a sticky sidebar. If you would like to see the page, click this link: On a specific subpage of the site, I am attempting to make an image Validator sticky, but unfortunately, it's not functioning a ...

Bullet-point Progress Indicator in Bootstrap

Seeking guidance on how to create a Bootstrap progress bar with dots incorporated, similar to the image linked below. Any tips or resources where I can learn more about this technique? https://i.stack.imgur.com/BF8RH.jpg .progress { width: 278px; he ...

CSS must be applied to various sections of an HTML document

For example, I have 2 CSS files. In one CSS file, I have the style: a{color: blue;} In the second file, I have: a{color: red;} I want to apply these styles to my HTML file. <div> <a>first file ...

Resizing a column to match the dimensions of a grid of pictures

Imagine you have a website structured like this. #left_column { width: 200px; } <div id="left_column"> /* some content */ </div> <div id="right_column"> /* A series of photos each with a width of 100px and floated */ </div> In t ...