I am not a ruby developer and I have been using Compass for a good 6 months. I have discovered this problem shown below.
I have read this question and used the top rated answer:
getting error after ugrading to sass-3.1.8
Version of Sass: Sass 3.1.1 (Brainy Betty) (as per suggestion)
Compass version: Compass 0.12.1 (Alnilam) (latest)
I run this command: compass compile --force when inside project.
error sass/screen.scss (Line 3 of _utilities.scss: Mixins may only be defined at the root of a document.)
This looks like automatically included file. I definitely can't find it anywhere. My main screen.scss file looks like this:
#import "partials/base";
#import "blueprint/reset";
#import "compass/css3";
#import "sprite/*.png";
$sprite-layout:vertical;
$sprite-spacing: 15px;
#include all-sprite-sprites;
....//blah blah blah rest of rules ....
Help!
Related
In trying to learn/use sass for 1st time, I used Homebrew to install dart-sass on recently updated High Sierra 10.13.3 . That worked and sass --version shows 1.1.1 I created a simple .scss file:
$color: #d9534f;
body {
color: $color;
}
and while in the same directory, then issued:
sass main.scss main.css --trace
in console and got:
Error reading main: Cannot open file.
dart:io _File.readAsBytesSync
package:sass/src/io/vm.dart 27 readFile
package:sass/src/compile.dart 33 compile
package:sass/sass.dart 63 compile
package:sass/src/executable.dart 110 main
What do I need to change, learn or do to get this working?
Oops. Reinstall. I ran
brew update multiple times, then
brew uninstall sass then
brew install --devel sass/sass/sass
and now
sass main.scss main.css
works.
I followed the foundation tutorial to create a new project. So I compile and watch the sass files with foundatoin watch which compile my files and stream the output to the localhost but I get this error when I am trying to import compass by typing #import "compass"; :
Error in plugin 'sass'
Message:
src\assets\scss\app.scss
Error: File to import not found or unreadable: compass
Parent style sheet: C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/src/assets/scss/app.scss
on line 7 of src/assets/scss/app.scss
>> #import "compass";
I am really a newbie to gulp, gem and all this stuff, so I tried to add compass by running bower install compass but this doesn't help. I already installed compass with gem by running gem install compassand this doesn't fix the problem.
So I searched to modify the gulp file, but I don't know anything about it, I found this post and I tried to add .pipe(sass({ compass: true, sourcemap: true, style: 'compressed' })) into my sass pipe. And this leads me to this error:
'sass' errored after 7.62 s
[19:33:49] TypeError: Cannot read property 'isFile' of undefined
at isFile (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:12:20)
at loadAsFileSync (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:42:17)
at loadAsDirectorySync (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:68:16)
at loadNodeModulesSync (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:77:21)
at Function.module.exports [as sync] (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:27:17)
at requireFn (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\index.js:64:25)
at Object.defineProperty.get [as sourcemaps] (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\index.js:103:41)
at sass (C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/gulpfile.babel.js:79:11)
at sass (C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/gulpfile.babel.js:80:11)
at sass (C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/gulpfile.babel.js:80:11)
Since I know nothing about gulp, streaming and sass compiling, I am wondering if someone could help me to add compass' mixins to my project. I am on Windows.
Year ago I did a Foundation project and all went ok, but I need to do some changes now and now I have issue with compiling scss.
Folder struction contains
Bower_components/
css/
images/
js/
scss/
config.rb
Config.rb looks like this
# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
And I am using Koala for compiling scss file (mobile_CP.scss) that looks like this:
/*
========== VENDOR
*/
#import "compass/utilities/sprites";
#import "compass/css3/images";
#import "compass/css3/border-radius";
#import "compass/css3/box-shadow";
/*
========== UTILS
*/
#import "utils/variables.cp.scss";
/*
========== COMPONENTS
*/
#import "components/CP/container";
Now I get error where it says:
Error: Undefined mixin 'background-image'.
on line 165 of D:/TestRepo/mobile.application/trunk/scss/utils/_variables.cp.scss, in `background-image'
from line 165 of D:/TestRepo/mobile.application/trunk/scss/utils/_variables.cp.scss, in `cpButton-silver'
from line 246 of D:/TestRepo/mobile.application/trunk/scss/components/CP/_overwrite.scss
from line 20 of D:\TestRepo\mobile.application\trunk\scss\mobile_CP.scss
Use --trace for backtrace.
Can't wrap my head around why I get this error now Undefined mixin 'background-image' and before it all worked ok??? Am I overseeing anything?
I found the solution for this issue. I was using the new version of compass (1.0.3) and sass (3.4.20), but the thing is i installed foundation project with bower and this didn't work with newer versions so I had to downgrade to compass 0.12.7 and sass 3.2.19. This complied my code with no errors.
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
I thought this would work:
.col4 {#include span-columns(3,12); #include nth-omega();}
But I get this error message (in CodeKit):
error screen.scss (Line 195 of _support.scss: Mixin with-only-support-for takes 6 arguments but 8 were passed.)
Without '#include nth-omega();' I don't get an error message. '#include nth-omega(4);' did not work either.
Susy < 1.0.4 had an error regarding nth-omega which might be what you're seeing. Which version of Compass and Susy are you using? Try updating both with > sudo gem update.