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.
Related
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'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.
I believe a picture best describes my issue
https://postimg.org/gallery/37bdm2lp8/
Please see img for tree document
https://postimg.org/image/qsmm9rdx1/
My issue is a simple one, but I am not getting my main.sass which imports all the other sass files to for compiling to display the bourbon assets, so my site isnt rendering the bourbon assets
I have tried the basic #import ../css/1-tools/bourbon but that doesnt work
Any help appreciated as the css isnt working now :(
Since you are all ready using gulp, try using the actual Bourbon NPM package. You can add it to your package.json file and require it via your gulpfile.
How to: https://github.com/thoughtbot/bourbon#installing-with-npm-and-using-a-node-based-asset-pipeline
Here is the page for the Bourbon package: https://www.npmjs.com/package/bourbon
Here is an example gulpfile that uses bourbon (with some other stuff you can probably ignore): https://github.com/thoughtbot/bitters/blob/master/Gulpfile.js
The main parts of this example gulpfile that you would need to add are the require on line 1 and adding bourbon to your Sass includePaths on line 17.
edit ⤵
Once this is set up you'll want to change your sass import to the following:
#import "bourbon";
Because of the addition to includePaths, gulp-sass will know where to look. 🔎
I've got SCSS code that is all on one line as a result of being compiled through SASS Bourbon. As a result it's basically unreadable.
I'm just wondering if there is a program out there that can take the SCSS code and break it up into a more readable CSS format?
Thanks,
Bourbon does not compile Sass. Depending on how you are compiling your Sass (command line, Rails, grunt, etc) you might need to pass a --style expanded argument so that the output is not compressed.
You can try pasting the SCSS into SassMeister and have it transpiled into CSS. The result is regular uncompressed CSS, so you should have no problems reading it.