using Jeet and Compass results in an error? - css

Whenever I try to use a combination of Jeet and Compass I get the following error:
Syntax error: Invalid CSS after \" gutter\": expected \")\", was \": 3,\"\A on line 3 of sass/jeet/_settings.scss\A from line 15 of sass/jeet/index.scss\A from line 7 of sass/screen.scss\A \A 1: // Grid Settings\A 2: $jeet: (\A 3: gutter: 3,\A 4: parent-first: false,\A 5: layout-direction: LTR\A 6: );\A 7: \A 8: // Sass Namespacing Function
When I run just Jeet or just compass everything works fine. I've tried different versions of SASS, Jeet, and Compass but I can't seem to find either the right combination or the right settings here.
Current Versions:
Sass 3.3.0.alpha.149 (Bleeding Edge)
Compass 0.12.2 (Alnilam)
I previously had both at their latest versions.
What can I try?
Recently tried:
- Updating to Compass 0.12.6 which results in the new error: ERROR: Cannot load compass.
Previously, this is the related code from Jeet that was throwing the error:
// Grid Settings
$jeet: (
gutter: 3,
parent-first: false,
layout-direction: LTR
);
// Sass Namespacing Function
#function jeet($var) {
#return map-get($jeet, $var);
}
$g: jeet(gutter);
error sass/jeet/_settings.scss (Line 3: Invalid CSS after " gutter": expected ")", was ": 3,")

I am using it in a Yeoman scaffold with
Sass 3.3.4 (Maptastic Maple)
Compass 0.12.5 (Alnilam)
It is being compiled by "grunt-contrib-compass": "~0.7.0" and so far have had no errors.
edit:
Also those settings appear to be stylus not scss.

Related

getting "Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Invalid CSS after " in angular ag-grid

I'm getting following error after even with node-sass, sass or without both of them. But i remove node modules and node cache clean, I'm still getting this error. I tried adding node-sass and sass versions also. but still this error keep coming. this was happened after I upgrade my ag-grid version to 27.3 from 23.4.
ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after " #return math": expected expression (e.g. 1px, bold), was ".div($lhs, $rhs);"
on line 315 of node_modules/ag-grid-community/src/styles/mixins/_ag-theme-params.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base-default-params.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base-mixin.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/_ag-theme-alpine-mixin.scss
from line 2 of D:\Projects\Operative\Repo\ag-grid-update\finance\finance-frontend\src\styles.scss
>> #return math.div($lhs, $rhs);
----------------^
need a help because I tried so many posted answers in SO.
As of Version 26 of AG Grid, Node-Sass will no longer work with AG Grid.
This is due to Node-Sass being deprecated in favor of Dart-Sass, you can find out more about this here.
For users upgrading from versions of AG Grid before 26 or new users, we would highly recommend using Sass.
For more information regarding AG Grid and Sass and how themes and styles work, please visit our documentation.

Why scss-bundle raised this error after Angular / Material 12 migration?

We have an Angular 11 project that use Angular Material and some scss files. I try to update it to Angular 11.
I executed the first command for Angular and Angular CLI without problem / error and our build works well :
npx #angular/cli#12 update #angular/core#12 #angular/cli#12
We have a problem after the command line that update Angular Material 12 :
npx #angular/cli#12 update #angular/material#12
It updates the package.json with the new 12 versions and modify our scss files ( with #use for instance and othe things , I don't know exactly the process update...)
We use scss-bundle ( version 2.4.0 ) to bundle several scss files in one with this command ( I hide my company name with XXX ;-) ):
scss-bundle -p . -e ./projects/#XXX/ang-ui/src/assets/XXX-theme.raw.scss -d ./projects/#XXX/ang-ui/src/assets/XXX-theme.scss
and the following error is thrown :
[Error] There is an error in your styles:
Invalid CSS after "...typography: mat": expected expression (e.g. 1px, bold), was ".define-typography-" on line (386, 24)
I don't know where is the file with line 386, I did not find it but after isolation th problems seems to come from this content and I really don't know what is the problem :
#use '~#angular/material' as mat;
#import '~#angular/material/theming';
$custom-typography: mat.define-typography-config($font-family: 'Arial,Helvetica,sans-serif',
$headline: mat.define-typography-level(32px, 48px, 700),
$body-1: mat.define-typography-level($text-size, 24px, 500));
...
Any idea ?

Sass is having hard time parsing a CSS RGB syntax

Just plugged in gulp-sass into an existing project, and I'm getting an error when I try to write an RGB syntax as follows:
rgb(70 168 255 / 0.05)
The log:
[17:51:58] Starting 'compileCSS'...
Error in plugin "sass"
Message:
src/xxx.css
Error: Function rgb is missing argument $green.
on line 77 of src/xxx.css
>> background-color: rgb(70 168 255 / 0.05);
This is a valid CSS sytnax (which my chrome apparently decided it should be my default syntax). Am I forced to replace all of the occurrences with commas?
Use sass instead of node-sass.
% npm uninstall node-sass
% npm install sass
Update:
dart-sass has been deprecated in favor of sass
According to sass, node-sass doesn't support color level 4. Therefore, I used the dart-sass compiler instead.

compass compile: Invalid CSS after "...lor}: #{$value}": expected "{", was ";")

I am trying to handpick the parts of a certain theme/plugin we want to use in our site by tinkering with the source SCSS files. The theme in question is Vali Admin.
I haven't used SASS or LESS in ages. Not familiar with compiling them at all. I just installed ruby and the compass (through gem install) in my system, and ran compass compile on the root directory of the vendor theme. However I am getting the following error:
error sass/main.scss (Line 4 of sass/1-tools/bootstrap-source/_root.scss: Invalid CSS after "...lor}: #{$value}": expected "{", was ";")
I am also getting a couple of warnings about "interpolation near operators". I'll paste it here if needed.
I have no idea why I am getting that error. I haven't made any changes to the SCSS files yet, I am simply trying to compile the vendor source code.
Here is the SCSS:
:root {
// Custom variable values only support SassScript inside `#{}`.
#each $color, $value in $colors {
--#{$color}: #{$value};
}
#each $color, $value in $theme-colors {
--#{$color}: #{$value};
}
#each $bp, $value in $grid-breakpoints {
--breakpoint-#{$bp}: #{$value};
}
// Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
--font-family-monospace: #{inspect($font-family-monospace)};
}
Just delete of the double "-" in the following lines:
old: --#{$color}:
new: -#{$color}:
this works fine.
I was getting this same error for Bootstrap 4.3 (https://getbootstrap.com/docs/4.3) in the _root.scss file.
I'm using CodeKit to compile Scss and it was pretty out of date. I realised that it didn't like to compile --#{$varname where -- and # live next to each other without a string in between. Whereas this line worked fine: --breakpoint-#{$bp}: #{$value};
My solution:
Updating CodeKit fixed the issue so I imagine you're not using the latest version of Compass?
Don't make any changes in the code. Just upgrade the version of sass gem that you are using. You can install the latest version using gem install sass.
I had version 3.4.25 and it was giving me the exact same error. I installed version 3.7.4 and everything is fine.
Check here for more information - https://github.com/sass/sass/issues/2383#issuecomment-399755755
change to
--#{''+$color+''}: #{$value};
and worked :)
My solution was to wrap the '--' into a sass variable:
#{'--'}#{$color}: #{$value};

SASS - error parsing associative array [duplicate]

This question already has answers here:
Is Sass 3.3 compatible with Compass?
(3 answers)
Closed 7 years ago.
I have a SASS file _button-map-mixin.css that starts with the following associative array:
$cache: (
color: (),
font-size: (),
line-height: (),
background-color: (),
font-family: ()
);
When I compile the file, I get the following error:
Invalid CSS after " color": expected ")", was ": (),"
I don't understand - isn't this valid syntax?
It almost seems like the compiler doesn't recognize an associative array - but I'm using SASS version 3.3.6 (and Compass 0.12.6).
Use sass 3.3.7 and compass 1.0 (it's in alpha gem install compass --pre) If you got wdm related error then also install wdm(require "Ruby Development Kit") gem. If you keep your gem list clean it will be easier to catch dependency errors. Run gem list --local and uninstall all previous versions of compass and sass if you don't need them.

Resources