This question already has answers here:
Is Sass 3.3 compatible with Compass?
(3 answers)
Closed 7 years ago.
I am using Compass with Sass (v 3.3 Maptastic Maple) and I am trying to use the new maps data structure. I am using grunt watch with compass, however when using the new maps syntax, it throws an error everytime I run grunt.
$colors: (
header: #b06,
text: #334,
footer: #666777
);
This is the error:
error sass/main.scss (Line 73 of sass/base/_variables.scss: Invalid CSS after " header": expected ")", was ": #b06,")
How can I use the new sass maps with compass?
I managed to get compass to compile the new syntax by installing the alpha of the latest version.
gem install compass --pre
Should do the trick.
I had the same issue with you, and after few hours of trying and googling, I found 2 solutions:
If you can, use grunt-contrib-sass instead.
But if you need to use grunt-contrib-compass, check the answer at this one Is Sass 3.3 compatible with Compass?
Related
I have download all of the compass source,import it to scss,and compile with gulp(gulp-sass).however,I was having problems compile it.the gulp-sass through error：
Error: Undefined operation: "prefix-usage(browser-prefixes(browsers()), background-img-opts, (full-support: true), (partial-support: true)) gt 0.01".
on line 324 of src/lib/_support.scss
After reviewing the official documentation, I found that the prefix-usage method is based on ruby and is compass-specific and not found in scss functions. This is my screenshot
I tried to find the source of this function in ruby, but unfortunately I did not find it.
Is there any solution that will allow me to migrate the compass project to gulp-sass as a whole?thanks for help.
(.sass)
div
background-color: cyan
Build error: Transform Sass on dart_gol|lib/forms_menu.sass threw
error: Invalid CSS after "...und-color: #333": expected "{", was ""
on line 6 of standard input
I have Sass installed:
sass --version
"Sass 3.4.22 (Selective Steve)"
I just began using the Sass transformer using pub. I got that error; then went back to --watch . (using Sass via terminal) to see if it happened there. The error was the same both times.
I'm using a .sass extension and it is giving me the problem. I'm using the Sass Basics as a guide.
I did not have a problem when using .scss, with the bracket formatting. I'm not sure why .sass has a problem.
The problem appears to be in the dart_sass_transformer. It isn't properly compiling the sass into css.
Turning off the transformer (removing it from the pubspec) and running sass via Terminal is working properly.
The code in question is just fine.
It tells you it was expecting {
What you need is:
div {
background-color: cyan
}
$ sass -v
Sass 3.4.2 (Selective Steve)
PHPStorm 7.1.3
Open a new .scss file and add:
$objects: (vegetable: carrot, mineral: salt, animal: chicken);
On each colon within the map PHPStorm gives me a red squiggly error stating "a term expected".
Why is PHPStorm giving me a “a term expected” error on a SASS map?
Because this feature was introduced in SASS v3.3 (released on 7th of March 2014) .. and PhpStorm v7.1.3 (at the end February 2014) does not support that version.
Such support was added later and will be available in upcoming PhpStorm v8. You can try latest public EAP build if you wish so now: http://eap.jetbrains.com/phpstorm
This question already has answers here:
Is Sass 3.3 compatible with Compass?
(3 answers)
Closed 7 years ago.
I've encountered the following issue with grunt-contrib-sass/compass:
(https://github.com/nex3/sass/issues/746)
Compiling this:
.badge {
border: 1px solid black;
&-info {
background:blue;
}
}
Errors this:
Sass Error: Invalid CSS after " &": expected "{", was "-info {"
"-info" may only be used at the beginning of a compound selector.
I have the latest SASS version (3.3.7) installed on the system (Ubuntu 12.04.4 LTS), and running scss from the command line on a fresh file with above code DO work.
However creating a fresh project with yo webapp (Yeoman generator-webapp), with Grunt, gives the above error.
Any thoughts?
As #cimmanon kindly commented, this is probably due to version conflict between SASS and Compass.
As Compass uses it's own version of SASS and I was using grunt-contrib-compass (and not SASS), and my version of Compass was < 1 - the effect was that the 3.3 version I had on my system wasn't used.
Watch out for that when using out-of-the-box Yeoman generators.
So when compiling this with 3.3.6 of SASS I get:
.badge {
border: 1px solid black;
}
.badge-info {
background: blue;
}
But with 3.2.19 I get the same error you do:
Invalid CSS after " &": expected "{", was "-info {"
"-info" may only be used at the beginning of a compound selector.
There's a rather involved history to using suffixes this way, see: A Change in Plans for Sass 3.3
So you have a SASS version problem somewhere in your toolchain.
I'm running in some troubles installing singularity in my yeoman gulp-webapp project. First, I installed singularity with bower.
After that I had a projekt structure like this:
My Projekt
app
bower_components
compass_breakpoint
sassy-maps
singularity
styles
main.scss
Then I imported singularity into my main.scss file like this:
#import "../bower_components/singularity/stylesheets/singularitygs";
In _singularity.scss I corrected the import path for breakpoint to:
#import "../../compass-breakpoint/stylesheets/breakpoint";
If I run gulpnow in the terminal I get this strange error:
[gulp] Error in plugin 'gulp-ruby-sass':
Syntax error: Invalid CSS after "...ntext holder') ": expected "}", was "!global;"
on line 47 of /Users/Shared/Dropbox/Server/htdocs/Frameworks/my-project/app/bower_components/compass-breakpoint/stylesheets/_breakpoint.scss
from line 4 of /Users/Shared/Dropbox/Server/htdocs/Frameworks/my-project/app/bower_components/singularity/stylesheets/_singularitygs.scss
from line 1 of /Users/Shared/Dropbox/Server/htdocs/Frameworks/my-project/app/styles/main.scss
at ChildProcess.<anonymous> (/Users/Shared/Dropbox/Server/htdocs/Frameworks/my-project/node_modules/gulp-ruby-sass/index.js:80:25)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:743:16)
at Socket.<anonymous> (child_process.js:956:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:466:12)
Did anyone have an idea how to get this setup running?
Thanks, Oli
While you can install Singularity through Bower, you need to make sure you're running a compiler that's compatible with Sass 3.3. The best way to ensure you are in fact using the correct version of Sass is to version your Ruby with Bundler. Your Gemfile should look something like the following:
source 'https://rubygems.org'
gem "sass", "~>3.3.0.rc.3"
Then make sure that Gulp Ruby Sass is running through bundleExec