I'm trying to build a web page with sass. I have a _mixins.scss file where I have written:
#mixin gradient{
background: background(//etc);
}
and a partial class _navbar.scss file where I define a class .menu and attempt to use the mixin:
#use '../custom' as *;
.menu{
#include gradient
li {
padding: 0 0.7rem;
a{
color: $white !important
text-transform: capitalize;
}
}
}
In visual studio code, intellisense has no problem with the #include, #mixin, and #use statements. Pressing "ctrl + click" on #use points to the correct file.
I am running "npm run compile:sass" in a Gitbash window, and the scss is compiling fine. The html file has a link to the stylesheet in style.css, the file where sass compiles the .scss code to.
Everything seems connected, and indeed everything up to now has been working fine until tryin to use a mixin.
I have googled the issue, looked at similar questions here, and cannot find a way to resolve this.
Related
I'm using css modules in a create-react-app project (React V17.0.2 / React-Scripts V4.0.3). All seems well in local but the styles break in production (hosted on netlify).
I believe the problem is that the css modules are not recognizing variables I've defined globally in plain css files. Here's an example of the set up I came up with:
index.css file imported at the top level index.js in my react project:
#import '../Global/ColorScheme.css';
body {
// body styles
}
a {
// global a tag styles
}
ColorScheme.css:
:root {
--green: #00b890;
--pink: #ef767a;
--brown: #554348;
--orange: #fb8f67;
}
Then some CSS module consuming global styles from ColorScheme.css..
SomeFile.module.css
.greenBox {
background-color: var(--green);
height: 500px;
width: 500px;
border: 1px solid #333;
}
Example Component
import React from 'react';
import styles from '../somePath/SomeFile.module.css';
export default function MyComponent() {
return <div className={styles.greenBox} />;
}
When I run it locally I will get a green box with height & width at 500px with a 1px solid black border around it. So all is working as expected. However the production build will show a 500px by 500px box with 1px solid black border but no background color. I'm guessing it's the disconnect is when a css module is using a variable defined in a plain css file. Maybe something with the way webpack compiles down a create-react-app for production build?
Does anyone have any ideas as to why this might be happening and any way I can get around it? I've seen instances of global variables in css modules but I'm trying to avoid importing the global styles in every single module.
I found the solution to my own problem and originally had that solution in the OP as an edit. Moving this to 'Answer my own question' so it's more clear if someone finds this issue in the future:
I found a work around by chance, but I don't understand the 'why' or 'how'. It seems like my custom CSS properties defined in :root were working, just not the ones I titled with color names (i.e. --navy, --green, --orange, or even --gray-scale-0). After running create-react-app's standard npm run build the produced main.css file would replace my css like this:
Some CSS Module Before Build
.someClass {
color: var(--green);
background-color: var(--gray-scale-0);
}
Same Class in Main.####.chunk.css After Build
.someClass {
color: var(green);
background-color: var(gray);
}
Changing my custom properties to something like --theme-orange or --theme-green works just fine. I'm still new to webpack and preprocessors so if anyone knows why this happens I'd love to know.
You should define the variable with $ and use it also with $ without any problem =>
$green : #00b890;
.greenBox {
background-color: $green;
}
I am developing a WordPress theme and I am trying to use sass from another file using the #use method but it doesn't seem to be working. How can I fix the problem since the #import rule method will be depreciated soon?
I have files
//_brand.scss
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
and then
//footer.scsss
#use 'brand' as b;
.footer{
padding: 0px 5%;
background-color: b.$base-color;
}
and I get this error when it's compiling
Compilation Error
Error: Invalid CSS after "...ground-color: b": expected expression (e.g. 1px, bold), was ".$font-size;"
on line 5 of sass/opt/lampp/.../sass/footer.scss
>> background-color: b.$base-color;
I am using "Live Sass Compiler" visual studio code extension to compile to CSS
If you want to use the variables you have defined within the brand.scss file across different files, you can use the #import directive. For using it, just add the line below to your footer.scss file:
#import "brand";
Source: https://www.w3schools.com/sass/sass_import.asp
I hope my answer will help you
I am using Angular5 with sass v1.3.2.
I want to be able to change a color that is used extensively in the scss files of my single page app in runtime (not by compiling new files).
The color is defined globally in my _variables.css as:
$brand: #123123;
And for example used as:
h1 {
color: $brand;
}
I learned that I can modify the color if I am using CSS variables such as:
# CSS
:root {
--brand: #123123
}
#JS
document.documentElement.style.setProperty('--brand', '#456456');
# OR
document.querySelector(':root').style.setProperty('--brand', '#456456');
However to be able to do that using SCSS, I needed to use css-vars mixin as such:
$brand: #123123;
:root {
#include css-vars((
--brand: #{$brand},
));
}
And use it as:
h1 {
color: var(--brand);
}
Two problems:
Actually, still --brand is not showing at root.
Also, the CSS generated in <script type="text/css"> by angular-cli does not have --brand anywhere, it is actually compiling the CSS variable into #123123 so the output is:
h1 {
color: #123123;
}
Any ideas about how can I achieve changing a global color in runtime? Or how to get my CSS in :root and then how to get SASS to not compile it?
UPDATE
As #JonUleis has showed, there is no need for using css-var. Now the var --brand shows in the DOM at :root.
However, now color: var(--brand); line still does not show in the CSS, and h1 doesn't have a color style at all.
After updating node-sass to the latest 4.9.0 from 4.8.3, it worked great.
You're likely on an outdated version of node-sass that wasn't yet compatible with the syntax for CSS custom properties.
Here's your example code compiling successfully using Sassmeister without using the css-vars mixin:
I'm not sure whats happening. I'm new to Sass, so I was following this begginers guide: https://scotch.io/tutorials/getting-started-with-sass
For practicing (and hoping to use it as my developing tool) I set LiveReload to compile .scss files. But when testing the variable scope I got unexpected results.
In style.scss I have the following code:
$primaryColor: #eeccff;
body {
$primaryColor: #ccc;
background: $primaryColor;
}
p {
color: $primaryColor;
}
// When compiled, our paragraph selector's color is #eeccff
So p is supposed to get color: #eeccff. But this is what I'm getting:
body {
background: #cccccc; }
p {
color: #cccccc; }
I tested the same code in sassmeister.com and it worked as expected, just like the tutorial says:
body {
background: #ccc;
}
p {
color: #eeccff;
}
Again, I'm using LiveReload for Mac. And these are the compiling options:
Does anyone has an idea of why is this happening?
Thanks!
EDIT:
I found this question where someone was experiencing a very similar problem in a different situation: Web Essential for Visual Studio Sass compile wrong
Apparently it has to do with the Sass version you use. But how do I change that for LiveReload? How you change that?
Well, I just changed from Sass compiler. I had to stop using LiveReload and compile with Koala to have the expected results. Couldn't manage to change LiveReload Sass gem.
Hello I am trying to use SASS in a project, but have come across a problem and I was wondering if anyone could help?
I have created two style sheets. One called defaults.scss and one called styles.scss. In the defaults.scss I have declared the following:
$mainColor: #848484;
I then try to call the $mainColor in my styles.scss using the following:
nav ul {
list-style: none outside none;
margin: 0; font-size: 1.2em;
color: $mainColor;
padding: 50px 0 0 0;
font-weight: bold;
text-align: center;
}
But I get the following error message: Syntax error: Undefined variable: "$mainColor".
Can anyone see what I am doing wrong? I have compass running.
Thanks.
If understand correctly, you have two .scss files. What I normally do is have a styles.scss and in that file you import all of the other .scss style sheets. I think they call them partials or something. So that your main style.scss compiles all of the .scss files together into the .css file. Right now I don't think your two files are aware of each other. your main styles.scss should simply look like this:
#import "reset.scss";
#import "global.scss";
#import "structure.scss";
#import "colors.scss";
#import "etc.scss";
Make sure they are in your intended cascading order - because that is how they will be smushed together. In your case, default first and then main.
It gets tricky when you start adding media queries too - but this should fix you up I think.
In your html you just need to call your .css file that the whole operation outputs.
<link rel="stylesheet" href="css/style.css"> or wherever you have it going to. Just one.