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?
Related
I'm trying to set up a project with Sass, and even though I have already made multiple Sass projects and everything seemed to work just fine, now I'm not able to use Sass (SCSS) variables at all. I checked and re-checked all of the syntax multiple times, however I can't seem to find the solution. I use dart-sass, but in the SCSS formatting.
My file structure:
styles
css
style.css
style.css.map
scss
components
_components.scss (uses #forward to import the rest of the files)
globals
_globals.scss (uses #forward to import the rest of the files)
basics.scss
colors.scss (the color variables that I'm talking about are declared here)
fonts.scss
typography.scss
util
_util.scss (uses #forward to import the rest of the files)
functions.scss
style.scss (uses #use to import the rest of the partial indexes)
My syntax for declaring variables and then calling them should be alright:
Declaring (in colors.scss):
$blue-300: hsl(204, 100%, 45%);
Then calling them (e.g. in _globals.scss):
h1 {color: $blue-300;}
I suspect it has something to do with the scope of the documents and their locations in individual folders, but I still can't wrap my head around it.
Thanks in advance
By defaut #use and #forward namespace their variables (see this). Try #forward *file* as * and #use globals/globals as *. This will remove the namespace. If you do want the namespace, try globals.colors.$blue-300.
also can you tell the version of sass you're using? (sass --version)
I've run into an Undefined Variable Error writing SCSS.
My file structure is sound (I believe), because it compiles the rest of the files as it should into main.scss.
I'm using #use instead of #import.
color: #f22437 vs color: $clr-primary
Error: Undefined variable.
╷
54 │ color: $clr-primary;
│ ^^^^^^^^^^^^
╵
scss/layouts/_navigation.scss 54:10 #use
scss/layouts/_all-layouts.scss 11:1 #use
scss/main.scss 7:1 root stylesheet
The files that are in question.
File Structure
UPDATE I changed all #use to #import, and it worked.
Please me understand why this worked and how I can #use instead of #import. Seems like an issue related to SASS, but I could still be at fault. For now I'll 'hack' it.
I had the same issue and after reading the docs, they say this:
Members (variables, functions, and mixins) loaded with #use are only visible in the stylesheet that loads them. Other stylesheets will need to write their own #use rules if they also want to access them. This helps make it easy to figure out exactly where each member is coming from. If you want to load members from many files at once, you can use the forward rule to forward them all from one shared file.
Solutions:
Preferred solution: Use #use in the styles file that is going to use the variables and not in the global one and call the variable like:
namespace.variablename
Use the forward rule as docs say
Use #import instead of #use but according to this, "Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely"
First:
#use is currently only available for Dart Sass and not LibSass or Ruby Sass. See https://sass-lang.com/documentation/at-rules/use for the latest compatibility
Second:
_variables.scss
$text-colour: #262626;
_otherFile.scss
#use 'variables';
body {
color: variables.$text-colour;
}
Check #whiscode answer here: https://stackoverflow.com/a/61500282/2470685
This works for me
`#use 'variables';
body {
color: variables.$text-colour;
}`
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.
So, let's say I have a SASS module _module.scss that declares some css variables aka custom properties. When I now load this module in another SASS styleshee, let's call it main.scss, I have access to all SASS-variables, mixins and also rules, but not the custom properties inside of it? Am I missing something?
Example files:
//_module.scss
:root {
--some-variable: red;
}
// main.scss
#use 'module';
div {
background-color: var(module.--some-variable); // won't work, private property because of leading '-'
background-color: module.var(--some-variable); // won't work, would have been horrible syntax as well
}
I could use #import but that is discouraged and deprecated (see SASS Documentation). I've tried including the variables in a pure css file module.css, which compiled but didn't declare any custom properties at runtime as it directly translates the #use 'module' from my SASS file to the exact same in CSS - which browsers don't understand obviously. It should just more or less copy the content of a pure css file but it doesn't. Sure, I could try writing mixins in my modules that set the variables but that's just a workaround.
Am I missing something? Do I really need to write a mixin, that sets the variables and needs to be loaded? This makes the use of custom properties within modules pretty cumbersome.
EDIT
Forgot to mention, that background-color: var(--some-variable) doesn't work either even though it should according to the documentation, since rules should just be applied directly without scoping.
Ugh. The issue is most definitely the fact that my VS Code extension uses LibSass and not Dart Sass. Therefore #use is not yet supported in most environments. The documentation should most definitely be more explicit about this especially when warning about the use of #import.
Since I know it works with #import the issue is resolved though I'd love to see the module system being included in LibSass as well.
tl;dr
Do no use #use if you're not absolutely certain that you use Dart Sass!
I am currently using IntelliJ IDEA 13 Ultimate Edition and I use Stylus as a CSS preprocessor and I really would like to add IntelliJ support for the Stylus' #import feature
Example
colors.styl contains
$nice-color = lightgreen
and foo.styl contains
#import "colors"
body
background-color $nice-color
This will evaluate to a css like this
body {
background-color: #90EE90
}
Question
My IDE will show me a nice little color-preview box next to the line-numbers in the editor.
But this only works for the colors.styl file, where the color is defined.
(https://www.jetbrains.com/img/webhelp/colorPreview.png)
I really would love to see the same preview-box in the foo.styl file, where I import and actually use this color. I already installed the Stylus plugin for IntelliJ.
Is there any way to achieve this?
I think it is not possible without changing the source of the Stylus IDEA plugin.