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
Related
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'm trying to use the 'starts with' selector inside my Sass program, but for some reason I got an error.
I have the following code:
a[href=^="//youtube.com"]
color: red
This throws the following error:
Invalid CSS after "a[href=": expected identifier or string, was "^="//youtube.com"]"
How can I resolve this error?
My Ruby version is:
ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]
To compile my SASS code to CSS I use Grunt with grunt-contrib-sass
Simply use a[href^="//youtube.com"]
As far as I know that's a standard CSS selector (an attribute selector) rather than a SASS feature but you got the syntax wrong:
[attr^=value]
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
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).
.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 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