According to sass the #import statement is directed to deprecation, in favour of #use, yet in the jekyll docs there are only examples of the first kind... I however can't get the latter to work!
When I try to reference a variable from a partial _color.sass:
$duck-blue: #199
With the use statement in some other partial _nav.sass:
#use 'color'
.duckdiv:
border: 2px solid color.$duck-blue
Jekyll throws the following
Error: Invalid CSS after "...2px solid color": expected expression (e.g. 1px, bold), was ".$duck-blue; }"
While everything works if I replace #use by #import and remove the color. scope in front of the variable.
Is there something I'm getting wrong?
I ran into this myself and spent a while digging, here's what I found.
Jekyll uses LibSass converter to convert SCSS to CSS. Lybsass has been deprecated now for over a year. The new modern converter is Dart Sass which includes the new #use references.
There is an open ticket in Jekyll to use dart-sass: https://github.com/jekyll/jekyll-sass-converter/issues/116
But in the meantime you can change the default sass converter by hand with a new gem: https://github.com/jekyll/jekyll-sass-converter/issues/116#issuecomment-850912425
Related
In one of the SCSS stylesheets in our project, we import two stylesheets from the WordPress Gutenberg components
#import '#gutenberg-components/button/style.scss';
#import '#gutenberg-components/date-time/style.scss';
(#gutenberg-components is an alias for ./node_modules/#wordpress/components/src).
These stylesheets use the Sass function darken for some colors. This is fine when we build our CSS using LibSass. But when we use Dart Sass instead, we get this error:
SassError: This function isn't allowed in plain CSS.
╷
152 │ color: darken(#cacccd,10%);
The Sass docs say something ambiguous about darken.
Because darken() is usually not the best way to make a color darker, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, darken($color, $amount) can be written color.adjust($color, $lightness: -$amount).
I understand this to mean Dart Sass won't transpile darken properly, and you need to replace it with color.adjust if you're using Dart Sass. Is that correct?
Another confusing thing is that Gutenberg already seems to be using Dart Sass. Yet they apparently don't get this error in their project, because they're still using darken. How do they make it work for them?
I have an issue with the Live Sass compiler in VS Code, namely when working with lists. None of the usual operations work. In the following example, it's list.nth(list,index).
The following works fine in a Codepen:
HTML
<p>red</p>
<p>blue</p>
<p>green</p>
SCSS
#use "sass:list";
p {
font-size: 25x;
font-weight: bold;
}
$colors: red blue green;
#for $n from 1 through 3 {
p:nth-child(#{$n}) {
color: list.nth($colors,$n);
}
}
This also works fine when compiling it locally with the Dart Sass CLI.
But when I try to compile this with the Live Sass compiler in VS Code, I get the following error:
Compilation Error
Error: Invalid CSS after "... color: list": expected expression (e.g. 1px, bold), was ".nth($colors, $n);"
Why is that?
Use Live Sass Compiler by Glenn Marks
I had exactly the same problem. You read the SASS official website, follow the instructions, write the code in Visual Studio Code, and then you get this strange Compilation Error when saving the SASS or SCSS file. You double-check everything and it seems like it should work, but it doesn't.
Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.
Don't use this extension: Live Sass Compiler by Ritwick Dey
You are probably using this extension: Live Sass Compiler by Ritwick Dey. It's widely used, but is no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing.
Use this extension: Live Sass Compiler by Glenn Marks
You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to #ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has been built upon it. This extension compiles your SASS or SCSS files to CSS files successfully.
The extension you are using does not seem to be maintained anymore, you can try to use this one instead.
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 🤘
I've run into an Undefined Variable Error writing SCSS.
My file structure is sound (I believe), because it compiles the rest of the files as it should into main.scss.
I'm using #use instead of #import.
color: #f22437 vs color: $clr-primary
Error: Undefined variable.
╷
54 │ color: $clr-primary;
│ ^^^^^^^^^^^^
╵
scss/layouts/_navigation.scss 54:10 #use
scss/layouts/_all-layouts.scss 11:1 #use
scss/main.scss 7:1 root stylesheet
The files that are in question.
File Structure
UPDATE I changed all #use to #import, and it worked.
Please me understand why this worked and how I can #use instead of #import. Seems like an issue related to SASS, but I could still be at fault. For now I'll 'hack' it.
I had the same issue and after reading the docs, they say this:
Members (variables, functions, and mixins) loaded with #use are only visible in the stylesheet that loads them. Other stylesheets will need to write their own #use rules if they also want to access them. This helps make it easy to figure out exactly where each member is coming from. If you want to load members from many files at once, you can use the forward rule to forward them all from one shared file.
Solutions:
Preferred solution: Use #use in the styles file that is going to use the variables and not in the global one and call the variable like:
namespace.variablename
Use the forward rule as docs say
Use #import instead of #use but according to this, "Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely"
First:
#use is currently only available for Dart Sass and not LibSass or Ruby Sass. See https://sass-lang.com/documentation/at-rules/use for the latest compatibility
Second:
_variables.scss
$text-colour: #262626;
_otherFile.scss
#use 'variables';
body {
color: variables.$text-colour;
}
Check #whiscode answer here: https://stackoverflow.com/a/61500282/2470685
This works for me
`#use 'variables';
body {
color: variables.$text-colour;
}`
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.