I'm unable to build .css file from scss no matter what I try.
I get the following error:
Error: Invalid CSS after " color: c": expected expression (e.g. 1px, bold), was ".$accent-color;"
on line 4 of sass/c:\MAMP\htdocs\testowy\sass\styles.scss
color: c.$accent-color;
The files I'm using:
_colors.scss:
$accent-color: #535353;
styles.scss:
#use 'uses/colors' as c;
body {
color: c.$accent-color;
}
I'm using Visual Studio Code and I have tried two different compiler extensions.
File structure:
Related
I'm running Neo4j on docker and would like to import the style.grass file using an environment file. Below is the context of the env file:
NEO4J_browser_post__connect__cmd='style node {diameter: 50px;color: #A5ABB6;border-color: #9AA1AC;border-width: 2px;text-color-internal: #FFFFFF;font-size: 10px;}'
The errors I get are:
Unknown command :font-size: 10px
Unknown command :text-color-internal: #FFFFFF
Unknown command :border-width: 2px
Unknown command :border-color: #9AA1AC
Unknown command :color: #A5ABB6
So Neo4j is interpreting the attributes of the stylesheet as console commands. How can I change the environment file such that all the attributes in the stylesheet are interpreted correctly, so not as console commands.
I have also tried NEO4J_browser_post__connect__cmd='style style.grass' but got the same errors. I can't fetch the stylesheet from an external link, so it has to be done internally.
The startup parameter in the neo4j.conf file is "browser.post_connect_cmd", not "NEO4J_browser_post__connect__cmd". I use this same parameter to automatically open browser guides on startup.
You could try removing the single quotes as well, and have:
browser.post_connect_cmd=style node {diameter: 50px;color: #A5ABB6;border-color: #9AA1AC;border-width: 2px;text-color-internal: #FFFFFF;font-size: 10px;}
I haven't tested it, but this should be equivalent to running the command manually:
:style node {
diameter: 50px;
color: #A5ABB6;
border-color: #9AA1AC;
border-width: 2px;
text-color-internal: #FFFFFF;
font-size: 10px;
}
I see similar discussions on this topic at https://github.com/neo4j/neo4j-browser/issues/171
Good luck.
I'm trying to set global variables in one file and then use these variables in all other scss files throughout the application. When I set the variables I can use them in that specific file but not others. I am using the '#use' method instead of '#import' as the sass docs recommended it however it seems the '#import' method would achieve what I need however I need a workaround for the long term. Finally, I tried using the '#forward' method but could not see any change and I got the same errors.
app.scss
#use 'layouts/variables.scss';
#use 'layouts/forms.scss';
_variables.scss
$ds-black: #212121;
_forms.scss
input
{
border: 1px solid $ds-black;
}
Console output when compiling:
Error: Undefined variable.
╷
14 │ border: 1px solid $ds-black;
│ ^^^^^^^^^
╵
resources\css\layouts\_forms.scss 14:23 #use
resources\css\app.scss 4:1 root stylesheet
I tried using the ' !global ' attribute however I got this error as well as the previous
Deprecation Warning: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Since this assignment is at the root of the stylesheet,
the !global flag is unnecessary and can safely be removed.
╷
9 │ $ds-black: #212121 !global;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
resources\css\layouts\_variables.scss 9:1 #use
resources\css\app.scss 3:1 root stylesheet
https://sass-lang.com/documentation/at-rules/use#choosing-a-namespace
You could change the use tag to something like
#use 'layouts/variables' as *;
or
#use 'layouts/variables';
//and then
input
{
border: 1px solid variables.$ds-black;
}
If you want to use the new Sass module system and have stylesheets that are only used as modules and should not be compiled on their own, you should name your mopules with a leading "_" so the compiler knows to treat them as partials. You then have those two options, Kenyi Larcher showed you.
I'm wondering why I can't add background-color: red; property on my scss file:
#my_container {
background-color: red; # Added this line and #efefef doesn't work either
Error print on Grunt:
src/sass/app_2/_common/layout/layouts.scss:7:27
✖ 7:27 Unexpected named color red color-named
It might be an error coming from Styelint or compiler. Please let me know if you need any detail.
That error comes from Stylelint because you have a rule that disables named colors: https://stylelint.io/user-guide/rules/color-named/
So I'm trying to include a string globalvar on the command line. According to the docs ( http://lesscss.org/usage/ ), it should be straightforward:
lessc --global-var="my-background=red"
However, if the value is a string (instead of a CSS colour in the example), it needs to be quoted, giving:
lessc --global-var="staticbase='static'"
But running that against my less file gives me:
NameError: variable #staticbase is undefined in /tmp/tmpoRLm7A on line 336, column 133:
336 ul.popular { background: url('#{staticbase}/background.jpg') 0 0 no-repeat; }
I've tried a variety of ways of escaping the various quotes, but nothing seems to work. The same less file compiles fine using the client-side library, with less.globalVars['staticbase'] set.
In my LESS project I am having issues getting my guarded mixins working with variables that I declared in another file. Here is the code I am working with:
_defaults.less (contains all of my variables)
//------------------------------------//
// #INCLUDE
//------------------------------------//
// Set whatever components you want included
// in your project to `true` and any components
// you do not wish to be included to `false`
// Base
#use-main: true;
_main.less (just a random partial in my project)
.main(#boolean) when (#boolean = true) {
// Styles go here
}
// Execute mixin
.main(#use-main);
style.less (imports all of my partials)
//------------------------------------//
// #IMPORTS
//------------------------------------//
// Base styles
#import "base/_main.less";
This is how my project is structured (for around 20 partials that are then imported into the style.less file).
Whenever I try to compile my project, I get this error:
Unrecognised input
c:\Users\Keenan\Documents\GitHub\concise.css-less\less\base_main.less line 1
c:\Users\Keenan\Documents\GitHub\concise.css-less\less\concise.less
The code you pasted is correct. In fact you are misled by lessc error message. It refers to the #main block. It seems the issue you are facing is related to your project Concise.css-less and more precisely this line.
#if #global-border-box == true {
// [...]
}
This is not the proper syntax for if statements in less. See question:
How to use if statements in LESS
It seems you are converting a project from stylus to less. I would suggest cutting large chunks of files that fail to import to find out, through bisection, the lines that less doesn't recognize. Alternatively, you could comment the top mixins guards that are used here to include this or that part of the css, and that confuse less for error reporting.
For example, if you comment the first and last lines of file _lists.less:
//.lists(#boolean) when (#boolean = true) {
[...]
//.lists(#use-lists);
lessc will report the error near the proper line (actually it's > on line 111 that it doesn't like):
ParseError: Unrecognised input in concise.css-less/less/base/_lists.less on line 109, column 9:
108 .breakpoint(small) {
109 dl.dl-horizontal {
110 overflow: hidden;