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.
Related
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 have downloaded and imported the font-awesome in my MVC project. I am using the .less files for styling.
I have a different less file for styles which runs fine but for some reason the font-awesome less file is not working, it gives the following error:
variable #fa-font-size-base is undefined on line 6 in file 'core.less':
[5]: display: inline-block;
[6]: font: normal normal normal #fa-font-size-base/#fa-line-height-base FontAwesome; // shortening font declaration
-----------------------------^
[7]: font-size: inherit; // can't have font-size inherit on line above, so need to override
I am not importing any file in the other less files, but seems like font-awesome has a bunch of imports. Can anyone help?
I ran into a very similar error which brought me here.
In my case, the problem was that I was using an out-date version of the dotless compiler (http://www.dotlesscss.org/)
We had been using an older version of Font Awesome and after upgrading it would no longer compile to CSS due to that missing variable. The newest version (as of this posting) had corrected whatever was causing the compilation failure. After upgrading the version of dotless we used, the problem went away.
Even if you're not using dotless, might be worth determining which .less compiler you are using to see if a newer version is available.
I'm trying to style a link and following BEM principles but I get an error from the sass compiler. here's the html
Link with icon
and here is the sass stuff:
.sg-link {
color: #111;
text-decoration: none;
&-icon {
&:before {
margin-right: 10px;
}
}
&:hover{
color: $maggie;
}
}
Now when sass watch compiles I get this error in the terminal:
error source/scss/atoms/_02-links.scss (Line 7: Invalid CSS after " &": expected "{", was "-icon {"
"-icon" may only be used at the beginning of a compound selector.)
I've used this technique before and always worked so I thought that maybe the sass version has something to do with it. I'm using Sass 3.2.13 (Media Mark). So I checked on sass website and latest version should be Sass 3.4.13 (Selective Steve) but when I try to update with gem update sass it says nothing to update. Tried with sudo too but no luck. Ideas?
EDIT: I've just checked the same code on Sassmeister and it works fine
Thanks in advance
You are correct about the Sass version. Using Sassmeister, you can see that your snippet compiles at Sass v3.4.x, but not at 3.2.x (you can configure the Sass version in the control panel, under the cog icon menu).
As for why you are having trouble updating Sass in your environment is probably beyond the scope of this question, but it could be that your system's version of Ruby/gem is outdated. You might consider a Ruby version management tool like rbenv or chruby for more fine-tuned control over which versions of gems are installed. I suspect that installing rbenv (for example), using it to install the latest version of Ruby, and then installing Sass with gem from there would solve your issue.
(Disclaimer: I'm not super experienced with Ruby, but I've found a setup like the one described above to work well for me.)
.class{
color:#333;
}
.ex-class{
#extend .class;
}
Shows error:
".ex-class" failed to extend ".class"
The selector ".class" was not found.
This will be an error in future releases of Sass
Use "#extend .class !optional" if the extend should be able to fail
What makes me in trouble, Sass is compiled fine on all other git Repos on my system, I tried by changing the Sass versions, My team member works fine with this Sass and same version.
#extend warning were introduced in Sass 3.2.0:
Any #extend that doesn't match any selectors in the document will now print a warning. These warnings will become errors in future versions of Sass. This will help protect against typos and make it clearer why broken styles aren't working.
In Sass 3.3.0, it stop to warn the user, simply throwing an error:
Sass will now throw an error when an #extend that has no effect is used. The !optional flag may be used to avoid this behavior for a single #extend.
Please note that #extend has been subject to many bug fix in Sass history (3.1.13, 3.2.5, 3.2.6, 3.2.8 and 3.2.9), and that particularly when it's used with media queries. I would recommend you and your team to use at least Sass v3.3.0.
If your code if written "as it", you shouldn't have any error/warning. If you're using #import, or if the block is wholly/partly written inside a media query, there could have issues.
I've got the same problem:
document [name="variable"]" failed to #extend "%variableSCSS".
The selector "%variableSCSS" was not found.
Use "#extend %variableSCSS !optional" if the extend should be able to fail.
_styles.scss
The problem was solved using #import variableSCSS.scss in _styles.scss
_variableSCSS.scss is the document which contains "%variableSCSS {...}". So check if your #imports are correctly called on the classes you are using them.
If you're using #import then check the permissions of the included files extension. It must be .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?