less css avoid globalized variable - css

I'm looking for the best way to avoid globally diffused variables.
I made a test with this configuration:
_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";
The output with lessc index.less test.css still looks like
body {
background: #000;
}
div {
background: #000;
}
But what I'm looking for is:
body {
background: #FFF;
}
div {
background: #000;
}
Using less 2.7 or 3.9 give the same behavior.
Do someone know a solution?
Thanks

You can always isolate the scope of anything (incl. an imported file) using "unnamed namespace", i.e. & {}, block.
E.g.:
test.less:
#import "_import";
body {
background: #test;
}
test2.less:
#import "_import2";
div {
background: #test;
}
index.less:
& {#import "test";}
& {#import "test2";}
Depending on your goals these & {} blocks can be moved right into the test files themselves.
---
Ref: Local Variable Scoping in Import Files

Related

how to import some other scss files in the middle of main scss with #use and #forward

I have style.scss (my main scss), _style2.scss, and style.css
// style.scss
body {
background:red;
}
#import '_style2.scss';
div {
background: blue;
}
When this is compiled to style.css it looks like exactly what i want it to look like:
// style.css
body {
background: red;
}
p {
background: green;
}
div {
background: blue;
}
Because #import will be eventually removed from Sass, now we should use #use and #forward, but I can't make it to work with #use and #forward because: Error: #use rules must be written before any other rules.
It only works when my #use is at the beginning of the file, but i want to import my _style2.scss in the middle, how to do it?

Ruby on Rails 6 Bootstrap undefined variable error on server restart

I am having a problem in rails 6 where when i restart my server I get Error: Undefined variable. If I comment out any scss variables in my files, refresh the page, un-comment the variables and refresh again everything works fine and I am able to use variables in my CSS files again. Im not really sure why this is happening and any help anyone can offer would be really appreciated.
Here is my application.scss file:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_self
*/
#import "custom_variables";
#import 'bootstrap/scss/bootstrap';
#import "#fortawesome/fontawesome-free/css/all.css";
#import 'layouts';
#import 'themes';
#import 'typography';
#import 'states';
and here are the files I am using variables in:
.dropdown-menu {
display: block;
visibility: hidden;
opacity: 0;
transition: all .3s;
}
#media only screen and (min-width: map_get($grid-breakpoints,"lg")) {
.dropdown:hover>.dropdown-menu {
visibility: visible;
opacity: 1;
}
}
#media only screen and (max-width: map_get($grid-breakpoints,"lg")) {
.dropdown-menu {
display: none;
}
}
.footer a:hover {
text-decoration: none;
}
.bg-dark-red {
background-color: $banner-color;
}
.navbar, .footer {
background-color: $navbar-bg-color;
a {
color: $navbar-color;
}
a:hover {
color: $navbar-hover-color;
}
.active {
color: $navbar-active-color;
}
}
.dropdown-menu {
background-color: $navbar-bg-color;
a {
color: $navbar-color;
}
a:hover {
color: $navbar-hover-color;
background-color: inherit;
}
.dropdown-divider {
border-top-color: $dropdown-border-color;
}
}
section.map {
background-color: $map-bg-color;
}
.btn-primary {
#include button-variant($primary-btn-color, darken($primary-btn-color, 7.5%), darken($primary-btn-color, 10%), lighten($primary-btn-color,5%), lighten($primary-btn-color, 10%), darken($primary-btn-color,30%));
}
Any suggestions on what I can do to stop this from occurring?
EDIT: I forgot to include the file where I am importing the variables, here it is:
$white: #fff;
$black: #000;
$primary-color: #FF0103;
$complementary-color: complement($primary-color);
$navbar-color: rgba($white, .55);
$navbar-bg-color: #343A40;
$navbar-hover-color: rgba($white, .75);
$dropdown-border-color: rgba($black, .15);
$navbar-active-color: $white;
$banner-color: $primary-color;
$primary-btn-color: #198754;
$map-bg-color: #E1E1E1;
I was also facing the same exact issue. It was so frustrating. First get rid of all the comments in the application.scss file especially the line that has *= require_self. Any file that uses bootstrap variables should have #import 'bootstrap/scss/bootstrap'; at the top. The following will NOT work:
application.scss:
#import 'bootstrap/scss/bootstrap';
#import 'custom.scss"
custom.css:
body {
background-color: $gray-200;
}
Instead move the line #import 'bootstrap/scss/bootstrap'; from application.scss to custome.scss, then it will work as shown below:
custom.scss:
#import 'bootstrap/scss/bootstrap';
body {
background-color: $gray-200;
}

How to make dynamic variables with less in a CSS file?

Actually I want to use a CSS variable in less...
:root {
--header: #6B66A4;
}
#header: #6B66A4;
How?
Less compiles the following
:root {
--header: #6B66A4;
}
#header: var(--header);
body {
color: #header;
}
to this CSS being generated at build time:
:root {
--header: #6B66A4;
}
body {
color: var(--header);
}
Of course Less doesn't know anything about what var(--header) means or is - it's just a string to Less.

Using CSS variables in LESS

This might seem basic, but I can't figure out how to use CSS variables in LESS?
variables.css:
.root {
--header-color: white;
--content-color: yellow;
}
styles.less:
#import "../variables.css";
.header {
color: #header-color;
}
I get error "#header-color is undefined".
LESS allows you to use normal CSS code, so use one option could be just use the variable as CSS:
#import "../variables.css";
.header {
color: var(--header-color);
}
Also, you can save the css var to a LESS var:
#import "../variables.css";
#header-color: var(--header-color);
.header {
color: #header-color;
}

Variable overriding in LESS when using #import (reference) not working. Why?

I want to do the variable overriding thing in LESS (solution) but I need to import a resource by reference and it does not work.
file one.less:
#color: #ffffff;
.foo { color: #color; }
file two.less:
// file two.less
.bar {
#import (reference) 'one.less';
}
#color: #000000;
The output:
.bar .foo {
color: #ffffff // <-- expected: "color: #000000"
}
I could not find anything about that in the internet.
Is it a bug (working with version 1.7.5)? Is it a leak in my head? Or is it simply not supported?

Resources