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""
Related
I have installed singularity with bower, and am using prepros as a compiler.
Attempting to compile my .scss file returns the following error:
File to import not found or unreadable: singularitygs
At the top of my styles.scss file:
#import "compass/reset";
#import "singularitygs";
config.rb:
require 'singularitygs'
relative_assets = true
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
Additional info (that might be relevant): I am only 'watching' my public folder with Prepros, so config.rb file is at the root of that folder.
Anyone know what the problem may be?
I have now got this working with the following steps:
► Install Ruby gems on my system, and installed singularity
using gems on the command line with:
gems install singularity
► Set Prepros to use system Ruby Installation (as opposed to built-in version) by going to Prepros Options -> Advanced Options -> Use Custom Ruby. (just enter 'ruby' if it's already in your path)
► Import compass, then singularity and breakpoint (the latter needed for responsive grids) in .scss file using:
#import "compass";
#import "singularitygs";
#import "breakpoint";
► Add config.rb file in project root and include the line:
require 'singularitygs'
Now it's all working sweet!
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.
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.