I want to change with javascript some SASS/CSS variables to change the color of multiple elements. 😅
How I can send SASS variables to CSS as variables?
I tryed it like in the documentation of Sass, but it gives me an error, on compiling the CSS.
Here the Error:
Error in plugin "sass" Message:
dev\sass\_settings.sass Error: Invalid CSS after "$primary-color: #ff2aad;":
expected 1 selector or at-rule, was "root: {"
on line 5 of dev/sass/_settings.sass
from line 1 of dev/sass/style.sass
$primary-color: #ff2aad;
Here my SASS code:
$primary-color: #ff2aad
:root
--primary-color: #{$primary-color}
Im using an NodeJS enviroment with an gulpfile.js.
My gulp-sass version is 4.1.0
It passes if I remove this part:
:root
--primary-color: #{$primary-color}
Maybe it exist an better way to manipulate SASS variables with javascript. If someone have an idea or documentation this would really help me 😊
Update / Solution:
I found out by using an CSS to SASS Converter that I have to add an \ before the :root Element
The Solution looks like this in SASS:
$primary_color: #ff2aad
\:root
--primary_color: #{$primary_color}
h1
color: var(primary_color: #ff2aad);
I didn't found any documentation about this but it seams to work perfectly fine without error or issues. 😊
Thanks on all that tryed to help. You Rock 🤘
Related
I am having troubles with SASS #use. How does css file contain the #use from SASS? And it keeps saying $font-size is not defined.
Note: It still works if I use "#import" and SASS version when I ran "npm sass -v" is 8.20. Thank you! Sorry for using picture, I cannot get the code format right.
I'd like to put a shared constant in a single .sass file and then import this in other .sass files but I'm getting Invalid CSS errors. currently, my code is structured as:
// src/react/stylesheets/_constants.sass
$uiAccent: black
and
// src/react/stylesheets/myComponent.sass
#use "constants"
//...
.item
border-bottom: 1px solid
border-color: constants.$uiAccent
I modeled this based on the official sass guide for #use and as best I can tell, my structure is identical to theirs.
When I run sass --watch src/react/stylesheets/:src/react/css/ to convert my sass files to css ones, I get error src/react/stylesheets/myComponent.sass (Line 12: Invalid CSS after "constants": expected expression (e.g. 1px, bold), was ".$uiAccent")
I've tried moving the variable into the file where it was used (so I just removed the #use line and copied in the variable assignment), and it all works fine, so I don't think it's an issue with the sass to css conversion, and I've made sure all my files are .sass and not .scss because I've seen someone have a similar problem with .scss files.
I found this github issue which looks similar, especially the related one about node-sass but these were both from 2015 so I have a hard time believing that such a common feature has been broken for 5 years.
Update: I realized that I misunderstood the page on #use and that it's only supported by Dart Sass right now, not LibSass, so #import is not discouraged in this case.
StackBlitz link
For some reason when setting Bootstrap variables to a CSS3 variables my Angular 6 app breaks with the following error
This is indeed the first usage of the SCSS variable in the bootstrap file, so it is obviously not happy with how I am setting it. I have made a very simple StackBlitz to replicate the issue. Have a look at the styles.scss.
Essentially this is what produces this error.
styles.scss
:root{
--primary: #0f0;
}
$primary: var(--primary); // Broken
// $primary: #f00; // Working
#import '../bootstrap/scss/bootstrap';
Any ideas on why Bootstrap may not be happy with this?
Found the answer.
It appears you cannot use css variables within SASS functions due to the dynamic nature of css variables together with the fact that sass is a preprocessor.
See this stack for a more detailed explanation.
I've started Vim (v8) and have proper syntax highlighters in place for css3. I am using postcss plugin called precss to provide for "SASS" like syntax in my code.
However, when I used a nested selector with "&:last-child" or &:first-child, the syntax throws an error. It doesn't break the code or anything, but that "red" error is so distracting for me. Check the screen shot below.
Anyone can figure out how to make this error go?? I use a plugin called vim-css3-syntax and it includes scss syntax highlighting.
Edit: Got it fixed by downloading https://github.com/cakebaker/scss-syntax.vim and then adding au BufRead,BufNewFile *.css set filetype=scss.css
Thanks in advance.
The fact that you are using SCSS syntax (nested blocks, &, etc.) in CSS makes your CSS invalid.
If you want to avoid syntax errors you have two paths:
stop using SCSS syntax in your CSS files,
make sure your file is recognized as what it is: SCSS.
I would consider the first path to be the most sensible. After all who writes JavaScript in a *.rb file or SCSS in a *.css file? But if you choose the second you can simply do:
setf scss
--- edit ---
Suppose we have this code:
body {
background-color: white;
}
It's both valid CSS and valid SCSS because SCSS is a superset of CSS. Any valid CSS is automatically valid SCSS. Vim will happily display it without any error, no matter what file extension (*.css, *.scss) and filetype (css, scss).
Now, suppose we have this code:
body {
h1 {
background-color: $brand-1;
}
}
It's valid SCSS but not valid CSS. If you write that code in a *.css file with the css filetype, you get errors because it's not CSS. If you write that code in a *.scss file with the scss filetype you don't get errors because it's valid SCSS.
I am trying to get started with Compass/Sass on my Mac. After running sudo gem install compass, I have set up a project with a single main.scss file and I use compass watch to have the file automatically compiled to CSS.
main.scss looks like this:
#import "compass/css3/border-radius"
div .blah .baz {
#include border-radius(4px, 4px);
font-weight: bold;
}
Seems like nothing complicated, right? Well, every time I save the file, I get an error like this:
>>> Change detected to: /Users/mikl/Sites/ddk7/profiles/blaahval/themes/kaskelot/./scss/main.scss
error ./scss/main.scss (Line 3: Invalid CSS after ".../border-radius"": expected selector or at-rule, was "$blue: #3bbfce;")
overwrite ./css/main.css
Is there something wrong with my SCSS syntax, or just compass just have very poor error messages?
As #jnpcl said, a semi-colon would be good. However, if that was the issue it should throw an error directly related to that.
This seems like a stretch, but did you copy and paste that line? Perhaps there is character weirdness happening?