I am using Bourbon and Neat, and have the following code
#include direction-context(right-to-left) {
div.actions { #include shift(3); #include shift(10); }
}
and am getting the following error:
Undefined mixin 'direction-context'.
I have double checked the relevant docs, however I do not understand why this is not working. Note that I am successfully using other mixins in the framework.
Update
I have the following versions:
neat (1.5.1)
bourbon (>= 3.1)
sass (~> 3.2.19)
The direction-context mixin was introduced in 1.7.0. You will need to update you Sass stack if you want to use it, since 1.7.1 works only with Sass 3.3 and above.
Alternatively, you can change direction in Neat 1.5.1 using #include row($direction: RTL); on the parent element, then calling #include reset-direction(); once you are done (at the bottom of the file, usually).
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 have a meteor app which uses bower components.
When I try to run the app I got an error: Scss compiler error: no mixin named transition
which comes from the line of: #include transition(.2s ease-out);
What could be cause of this problem?
#include expects a mixin. In this case it is expecting a mixin named 'transition' and I think you are trying to apply 'transition' as a css property.
Check this page out: http://sass-lang.com/guide
I am trying to compile this SASS:
#supports (display: flex) {
.event_entry {
#include flexbox;
#include flexwrap;
}
}
I am using node-sass 0.9.3 (i.e. libsass) via grunt-sass 0.13.1. However, I am getting this error:
error: error reading values after display
The line number associated with the error is the very first line, the line containing the #supports directive.
I believe that this is valid SASS/CSS and I have successfully compiled this same declaration using grunt-contrib-sass 0.7.3. This implies that it is an issue with libsass not supporting the syntax, but AFAIK the #support directive has been around for a long time now, so that seems unlikely. I would very much like to use node-sass if possible since it promises much faster compile speeds. What can I do to get this working?
As you suspected, this is a bug in libsass.
https://github.com/sass/libsass/issues/261
I have a complex custom built SCSS framework that where mixins can call on other mixins.
For example
#mixin red-combo {
#include red-text;
#include red-background;
}
.div-red {
#include red-combo;
}
In the output CSS, the line comments will only point to red-text and red-background. That fact that red-combo was used to 'call' red-text and red-background is ignored.
Is there any way to make the line comments more detailed, so that red-combo can showed in the line comments.
No, this is not possible. Only one reference is supported per block.
The introduction of source maps does not make a lot of difference either. It would support references for individual properties, yet one reference per property is still a limitation.