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.
Related
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 just installed foundation with sass and now i compiled the scss directory for the first time and i've been given this error in the output css.
Syntax error: File to import not found or unreadable: foundation/functions.
I used this command from ruby command prompt
sass --watch scss:css
This is the first time i am trying to use foundation with SASS.
Please tell me where am i doing wrong.
thanks.
The .rb file 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 = "img"
javascripts_dir = "js"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
You need to tell your framework where to find Foundation files. For example, compass config.rb file contains line "add_import_path "bower_components/foundation/scss""
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
New to ruby (I usually use python/django), new to sass. I'm simply trying to configure the output css directory option.
Related question here: changing the output directory of the resulting css file in compass webby
and here: possible to change the sass compass output folder for different files
Answer to both is to change config.rb. Where is config.rb found? Is there another way to set the options?
You can simply use:
sass --watch input-dir:output-dir
i.e:
sass --watch scss:css
config.rb is specific to Compass projects and is located in the root of your project. If you are using Compass, you can specify css_dir to your liking keeping in mind that / is root of your Compass project.
css_dir = "/assets/css"
If you are using just Sass, you can specify the output path when compiling.
sass input.scss ../path/to/output.css
Open config.rb in a text editor and change "css_dir" from "stylesheets" to "/" (see below)
http_path = "/"
css_dir = "/"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
You can also use koala app(http://koala-app.com/) to change the css output direcctory. i think this is simplest method.
1. Install Koala app
2. Run and add both directories in Koala interface and refersh.