Watch and compile existing scss folder with compass - sass

Hi I am working on a project which already comes with an scss and css folder with existing files within them. I have compass installed and I am trying to get it to watch the scss folder and compile the changes to the css folder. If i use
compass create
it generates all of its own folders. If I use
compass create . --bare --sass-dir "scss" --css-dir "css"
it says the config.rb file already exists. And if I use
compass watch
it says there is nothing to compile. Any ideas where I am going wrong? Cheers!

You can also run Sass with the --compass flag to load Compass. This makes it easy to slot Compass into an existing Sass project.

I know this is an older question, but stumbled across it when I encountered the same issue, interestingly running the following worked for me. Without --force, I encounted the same issue as OP when he tried the command without it, but with it included, it worked like a charm.
compass create . --bare --sass-dir "scss" --css-dir "css" --force

Related

Why isn't my SASS watch command working?

Attempting on a Mac with the latest version of Yosemite
I'm using the latest version of sass to refactor my site. I'm setting up watch command via the command line. my directory setup has a scss folder with the main css stylesheet cloned as .scss. and no css folder.
When I attempt the sass --watch scss:css command while in the main project directory folder, I've been told that, if there isn't one present, a css folder should be generated and a cloned .css file should be created along with a map file. Command line tells me >>> Sass is watching for changes. Press Ctrl-C to stop. however, changes are not being recorded.
I've tried updating my gems and uninstalling/ reinstalling sass, but nothing seems to be working.
Just tried this - the css folder doesn't get autogenerated. You need to generate it yourself. From there on, you should be good to go.
So if you are in the main project folder with subfolders called scss and css and you have, for example, a main.scss file in the scss directory, you can run the command exactly as you specified and everything should work as specified.

listener.rb: Not a directory

In the past few week, I've started seeing errors when I try to run compass watch:
Errno::ENOTDIR on line ["60"] of /Library/Ruby/Gems/2.0.0/gems/listen-2.8.0/lib/listen/listener.rb: Not a directory - /Users/nick/.compass/extensions/readme.txt/stylesheets
It will watch and compile the SCSS into CSS once and then I have to run compass watch again and get that error. When I run compass watch --trace, I get this:
https://www.dropbox.com/s/s1cia842dusitol/compass-watch-trace.png?dl=0
My versions are Compass 1.0.1 (Polaris) & Sass 3.4.9 (Selective Steve)
I had the same problem when running compass watch in terminal because I was in the wrong directory. Are you running it in the same directory as the config.rb file is located at?
I fixed it by first navigating to the folder config.rb is in and then executing compass watch...
Best option I found was this: Failed to build gem native extension (installing Compass)
After that, I starting using http://mhs.github.io/scout-app/ and that worked fine. When I started a new job that uses Grunt, I ditched compass watch all together and used the grunt-contrib-sass plug-in to get the job done.

phpstorm - #import "compass" cannot resolve

I'm on Windows7, I've installed Compass and configured it correctly in my project folder.
I'm new to Scss and Compass but when I launch compass watch from CMD my style.scss gets automatically compiled and everything seems fine.
[ver. compass 1.0.1 // sass 3.4.3].
But when I open my style.scss from phpstorm #import "compass" comes up with an error cannot resolve import into sass/scss;
opening up phpstorm's compass support it looks like the default options are correct:
compass executable file: C:\Ruby200-64\bin\compass
config path: is pointing to local server and is correct
this is my watcher setting:
I've tried changing it but I can't get compass support to work....
Eventually the only way I found to get it working is creating a Symlink between my sass folder and
my compass executable;
I found an old answer on this that helped me...
in detail:
1.Open Cmd (as admin) and change dir to your sass folder in your project .
2.From your sass-folder create a symlink with mklink /d compass C:\Ruby200-64\lib\ruby\gems\2.0.0\gems\compass-1.0.1\bin\compass .
Now phpstorm works fine (with default filewatchers)_

How to configure a SCSS project?

I'm pretty new to SASS/SCSS and got a git project with CSS Files in the main directory which shall import partials from a subdirectory. I was wondering if it's possible to install sass on the server, create a compass project so that css files will be created automatically after a live edit of the scss files on the server? Or does it have to be local with a filewatcher? I already tried to set up a compass project on the server but no css files were created automatically. Was it because of wrong settings or is it just not possible this way?
If it's possible is there a good step by step tutorial? I already found this
Maybe the problem is the path. In my config.rb I changed the path without knowing what to write in the string if sass and css directory are the same as project path. Didn't work with "/" or an empty string.
Both Sass and Compass provide watch commands. You can use either:
sass --watch input.scss:output.css (options)
or, assuming you've got your Compass config file correctly setting your css_dir vairable:
compass watch
Either of those should recompile the css file upon changes. If you want this done live on the server, you'll need to execute the watch command on the server.
To add a point to #aerook's answer,
In your projects you may have multiple scss and css files. In which case you may use the following to watch the entire scss directory to make changes in the css directory
sass --watch scss:css
PS : scss and css are folder names in the same directory path.

compass: You must compile individual stylesheets from the project directory

A while ago I was using compass to generate stylesheets from sass for a project.
Recently I returned to that project. I went to my sass directory and did "compass watch --debug .:."
This generated the error "You must compile individual stylesheets from the project directory".
I discovered that there was no config.rb in the directory. So I recreated one. It looks like this:
http_path = "/"
css_dir = "/css"
sass_dir = "/css"
images_dir = "/img"
javascripts_dir = "/js"
preferred_syntax = :sass
However, all of my attempts to use compass result in the same error, no matter what values I put in the config.
How do I get compass to actually process my sass?
just came across this problem too, and it has already been answered in the comment by Arnaud Valle.
But just for clarity, and people later searching.
Just creating a config.rb will not work, as compass does not recognise it.
The answer is just switch to your project directory(root) and then run
compass init
This will then create you a "working" config.rb, and two directories called sass, and stylesheets, in the sass directory will be a couple of start scss files.
If you do not want them, or want to use different directories, you can of course now edit your freshly created and working config.rb, and change your directories (and then delete the old automatically created ones)
Oh and i suspect your js will not be in a folder javascripts, so edit that to in the config.rb
Anyway having done that(or not) you should then be able to run
compass watch
and all should be good , i.e. your scss files get compiled to css files
As an alternative that I have not tried, but theoretically
compass compile [path/to/scss]
should work too, if you don't want to init compass
More information to be found in the compass documentation here
and to go completely over the top, if this is something you find yourself doing often, and hate the defaults then edit/add the following to your ~/.bash_profile
alias compass_init="compass init --syntax=sass --css-dir=css --javascripts-dir=js"
I usually have my config.rb in my project directory (or root) rather than the sass directory.
Folder structure would be like this:
config.rb
--- css
--- sass
Also your css_dir and sass_dir have the same value, which could lead to your issue as well.
Remove the "/" in front of your directory names.
This error occurs when your source path is incorrect. In your case, your directories have an extra "/". Removing them should fix your problem.
As others have said, creating a config.rb with compass init will fix it too.
Note that Config.rb is not necessary when using Grunt or similar runners that run compass. That might be how your project was running before without the config.rb file. The runner starts compass with all the paths and options in Gruntfile.js. Having paths/options in both Gruntfile and config.rb might cause problems.
Had this problem on windows 7 using Symfony with Gulp, i solved it using absolute paths like this:
gulp.task('compass', function() {
gulp.src('c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass/*.scss')
.pipe(compass({
config_file: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/config.rb',
css: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/stylesheets',
sass: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass'
}))
.pipe(gulp.dest('c:/wamp/www/mnv/web/css'));
});
For anyone looking to compile SCSS without making a whole project (e.g., for a one-off page), you can just create a config.rb, but it needs at least two parameters: css_dir and sass_dir. (touch-ing it is not enough).
A minimal config.rb:
css_dir='.';sass_dir='.'
This effectively creates a compass project for the purpose of compiling simple files. You'll have to include the rest of the params if you want to use sprites, etc. Assuming compass can write to the directory, it'll create the .sass-cache directory once you run compass compile or compass watch for the first time.
It's also important to note that compass commands must be run from the directory with config.rb, or you'll get this error.
Finally, if you just want to take advantage of simple SASS features (and not Compass framework components), straight SASS is often simpler:
sass --watch foo.scss:foo.css
I experienced the same problem using gulp-compass-compile. Fixed that by changing srcDir option (that converts to --sass-dir option in compass compile call) for compass function from ./src/scss to src/scss. Hope that helps someone.

Resources