I'm trying to use SASS but I got some issue with it, is not compiling anything. I tried different things to troubleshoot, is still not working.
Ruby 2.0.0-p576
Sass 3.4.5
Wind 7
sass --watch sass/scss.css:css/style.css
OR
sass --watch scss.css:css.css
result:
sass is watching for change .press Ctr-C to stop.
write sass/scss.css
write sass/scss.css.map
config.rb
# Set this to the root of your project when deployed:
css_dir = 'css'
sass_dir = 'sass'
images_dir = './img'
javascript_dir = 'js'
output_style = :expanded
relative_assets = true
line_comments = false
Thanks
Based on the information you've provided, there are a couple of things to fix.
First, you'll want your .scss files to have the same name as your compiled .css files, just with a different extension. In this case, you'd name your .scss file style.scss, and sass will save the compiled result to style.css.
The second thing I notice is that you're using compass, with a config.rb file. This suggests that you probably don't want to use the sass --watch command to start Sass, since going this route will not actually enable Compass to be used in your Sass files. The way to invoke compass here is to run compass watch from the directory that encloses your /sass and /css directories (since those are specified in your config.rb file.
Fixing those two items will probably get your Sass compiler running the way you want. Here's what the resulting structure should look like:
/enclosing_folder
config.rb
/css
style.css (this will be added by the sass compiler)
/sass
style.scss
In this example, run compass watch from enclosing_folder.
I'm having in issue with the sass --watch . command. I'm on a windows and I installed ruby and then sass according to instructions I found online. Seemed to work fine until I was using the sass --watch . command. When I enter it into the console, it finds the file and says Sass is watching for a change. When I open the file though and edit it, sass doesn't recognize that the file has been changed, and doesn't overwrite to the new file.
Any ideas?
You need to initiate compass before you can use compass watch.
Do so with:
compass create path/to/project/root/dir --sass-dir="path/to/your/sass" --css-dir="path/to/output/sass"
You should then have a compass config.rb in your project's root directory that looks like:
preferred_syntax = :sass
http_path = '/'
css_dir = 'assets/stylesheets'
sass_dir = 'assets/sass'
images_dir = 'assets/images'
javascripts_dir = 'assets/javascripts'
relative_assets = true
line_comments = true
# output_style = :compressed
Then from that root directory you should be all set to run, compass watch, and have everything in your sass dir compile to your css dir.
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.
I want to compile all the scss to css in my part folder . how to do it ?
the compass watch command can only compile the root sass folder to css folder.
for example: I want to compile top_menu.scss to top_menu.css.
config.rb
sass
css
part
top_menu
|--top_menu.php
|--sass
| |--top_menu.scss
|--css
| |--top_menu.css
Try this executing the compass watch command as it follows
compass watch --sass-dir part/top_menu/sass --css-dir part/top_menu/css -c config.rb
I hope it helps.
Cheers!
You should move the part folder inside the sass folder and set config.rb to watch the sass folder:
sass_dir = 'sass'
UPD1: if you want to keep the structure, try pointing sass_dir at the root folder. Another option is to make those files partials that would embed into one big css file instead of multiple smaller ones.
How do I configure Compass when using the sass CLI?
Basically I was to set the images_dir property, here is the command I have been using:
sass
--compass
path/to/input.scss
path/to/output.css
I tried:
sass
--compass
-c path/to/config.rb
path/to/input.scss
path/to/output.css
Output:
WARNING on line 1 of path/to/config.rb:
This selector doesn't have any properties and will not be rendered.
Syntax error: Invalid CSS after "image_dir ": expected selector, was "= "test""
on line 1 of path/to/config.rb
So obviously the -c doesn't work the same way when using the compass compile command.
And
sass
--compass
--images-dir path/to/images
path/to/input.scss
path/to/output.css
Output:
OptionParser::InvalidOption: invalid option: --images-dir
Likewise as above.
I tried to use the compass compile but I don't have a project directory.
compass compile
--images-dir path/to/images
path/to
path/to/input.scss
Output:
You must compile individual stylesheets from the project directory.
Also tried this:
compass compile
path/to
Output:
Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
config.rb just contained:
images_dir = "test"
compass compile reads a config.rb file for the configuration.
Here is an example project setup that that I use, starting with the config.rb file:
require "susy"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "public/css"
sass_dir = "private/scss"
images_dir = "public/images"
http_images_path = "/images"
output_style = :expanded # or :nested or :compact or :compressed
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = true
My project is setup like:
private/scss # scss files. I use a main file that handles imports itself
public/images # images
public/css # built css here
config.rb # contents included above
To build it, I run the following in the project's root folder:
bundle exec compass compile private/scss/layout.scss