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