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.
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.
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
So, let's assume I have the following situation: I have 2 .scss files.
One with a variable, and one that will be actually translated into .css for my webpage, where I want to access to said variable.
vars.scss
$my_color: red;
main.scss
#use 'vars'
body {
color: $my_color;
}
What I am trying to do is to access the variable defined in vars.css and use it.
The reference is correct since if I use #import instead of #use, everything works
I've also tried to reference to the variable with vars.$my_color as was suggested in the documentation, but I keep getting a "undefined variable" error.
Well, if you read the documentation then in the ⚠️ Heads up! section, where the undesirability of further use of the #import rule is written, below, you can read the following:
The #import rule has a number of serious problems:
#import makes all variables, mixins, and functions globally available.
Therefore, the #use rule makes them inaccessible. Which is what you observe in action.
I think to achieve the desired result, combination of #use and #forward rules should be used.
But I am using VSCode Live Sass Compiler (Maybe you're using it too?) where #use is not supported so I couldn't give you the exact howto.
Hope this clarifies a lot.
I have created a blank project in angular 4 and I am trying to design it but the sass isn't working when ever I add sass and run project I am getting this error
body{
h1{
color : red;
}
}
^
Invalid CSS after "body{": expected "}", was "{"
in C:projectname/src\styles.sass (line 1, column 6)
My index.html code is
<body>
<h1>Here</h1>
</body>
Any help would be appreciated
Based on your error message (C:projectname/src\styles.sass) It seems you're using the .sass extension for a SCSS file. Change your file name to styles.scss.
Sass and SCSS use two different and incompatible syntaxes.
There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. This syntax is enhanced with the Sass
features described below. Files using this syntax have the .scss
extension.
The second and older syntax, known as the indented syntax (or
sometimes just “Sass”), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Files using this syntax have the .sass extension.
Currently using Bootstrap, compiling with Codekit, and also have a separate style.less that I'm working on.
In variables.less:
#blue: #0096EF;
In style.less, I have the following:
.title-text {color: #blue;}
#import: "variables.less";
In bootstrap.less:
#import: "style.less";
#import: "variables.less";
Am I doing this right? To my mind, when bootstrap is compiled it results in variables.less occurring twice.
you should be able to go with import of variables.less once in bootstrap as first import instance, and do not include it second time in actual style.less. Because you are right on your assumption, it will import variable.less again. meaning you are importing same variables in two locations.
P.S. as long as variables.less that defines variables that you will be using is imported before you access variables themselves you will be fine.
#color-black: #000;
.color {
color: #color-black;
}
I discovered this is also a Codekit issue too, as I am using Codekit to compile the less files.
Solution:
Create style.less and edit it as intended, reference #blue variable
(not declared in current document)
On save, Codekit returns a compile error, due to un-declared variable in style.less. Ignore the error.
In bootstrap.less #import style.less
Save bootstrap.less, it compiles without issue
Call bootstrap.css in the html doc
Incidentally, I encountered a Codekit bug between step 2 and 3. After step 2, Codekit no longer watches or compiles anything. To solve, I needed to remove the watched project and then re-add it to Codekit.