Installed Foundation 5 with Sass a couple of days ago. But, after:
foundation new test_grid
cd test_grid
compass watch
files, directories created by watch...
open index.html and there's no styling. (I also tried 'compass compile' and 'compass watch', but no changes.
The config.rb that compass uses shows:
add_import_path "bower_components/foundation/scss"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
And the app.scss shows:
#import "settings";
#import "foundation";
Looking at stylesheets/app.css it seems that the foundation.css file hasn't been imported.
Any ideas of what's going on? Could be a totally newbie problem...knocked my head against the wall and googled ad nauseam.
Based on a suggestion, I reinstalled compass, but still get the same.
Compass seems to be okay when watching:
emily#emily:~/sites/test_grids(master*)$ compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
directory stylesheets
write stylesheets/app.css
and when I modify bower_components/foundation/scss/foundation.scss (insert p {font-size: 10rem;} it shows:
modified bower_components/foundation/scss/foundation.scss
write stylesheets/app.css
The refreshed index.html font size changes, but again, no foundation.css styling.
I was having this problem too and found the answer here:
https://stackoverflow.com/a/25560150/3990944
The latests Sass and Compass are not compatible. Try uninstalling and installing older versions. Worked for me. Details are in the post above.
You want to make changes in the _settings.scss or app.scss, not the files located in Bower components. See file descriptions here:
http://foundation.zurb.com/docs/sass-files.html
How to use
http://foundation.zurb.com/docs/using-sass.html
Try this out:
sudo gem uninstall compass 1.0.0
sudo gem uninstall sass 3.4.0
sudo gem install sass --version 3.2.9
sudo gem install compass --version 0.12.7
This method worked for me
Related
I've inherited a project that uses Sass. I'm a 'NET developer so compiling CSS isn't really something ive had much exposure to. The previous developer told me (as I run on Windows and he runs on a MAC) to install prepros.
The steps I have run through are:
Installed Ruby 2.3.0 for Windows
Installed sass "gem istall sass"
Installed compass "gem install compass"
Installed sass-globbing "gem install sass-globbing"
Installed compass-install-once "gem install compass-install-once"
I then opened Prepros and dragged in my "static folder", which has a structure like so:
Static
css
js
sass
components (multiple files in this directory)
components.sass
screen.sass
screen.css looks like:
#import compass/reset
#import lubalin.css
#import variables
#import typography
#import main
#import components
#import elements
#import shop
#import blog
#import sponsor
#import theme
And the content of the screen.sass files looks like so:
#import "components/*"
In PrePros I changed the compiler to use Ruby Sass instead of Node Sass (on the advice of the previous developer).
Now, when I click on screen.sass in PrePros and click "Process file" I get the error message "Error: It's not clear wghich file to import for '#import "components/*"'.
I found some threads online that suggested that this was due to Windows, and that the wildcard should be changed to #import "components/.", however when I run with this command the error i get is "Error: File to import not found or unreadable: components/."
Strangely, the file that prepros creates i.e. seems to understand perfectly which files to import for components.sass because I can see in the file the following section:
{
"path": "sass/components.sass",
"imports": [
"sass/components/_address.sass",
"sass/components/_buttons.sass",
"sass/components/_checkboxes.sass",
"sass/components/_cookies.sass",
"sass/components/_emailSignup.sass",
"sass/components/_forms.sass",
"sass/components/_moreContent.sass",
"sass/components/_postCode.sass",
"sass/components/_rte.sass",
"sass/components/_search.sass",
"sass/components/_separator.sass",
"sass/components/_tooltip.sass",
"sass/components/accordion.sass",
"sass/components/equalHeight.sass",
"sass/components/grid.sass",
"sass/components/modal.sass",
"sass/components/svgImages.sass",
"sass/components/table.sass",
"sass/components/_checkboxes.sass"
]
},
So it seems strange that PrePros can tell which files to import, yet when I try to compile it doesn't understand!
Lastly, the contents of the compass (config.rb) is:
require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
Can anyone help a Sass newbie that;s out of their depth get PrePros up and running!? What am I doing wrong?
Thanks for your time in advance
dotdev
In my opinion, if you are a NET Developer you don't need PrePros, because you have Visual Studio good plugin-compilers. Try WebEssentials, it will do all the work for you. WebEssentials compiles SASS/SCSS files automatically when you save it.
I've installed Sass and set up a folder with an index.html file and style.scss in my local server (In Ubuntu 13.04).
I type this command into the terminal:
sass --watch style.scss:style.css
And get this output:
Sass is watching for changes. Press Ctrl-C to stop.
LoadError: cannot load such file -- rb-inotify
Use --trace for backtrace.
Sass will update the css the first time I save my .scss file but after that nothing. Anyone know why?
You need to install rb-inotify gem:
gem install rb-inotify
Its more of code editor issue. I faced this issue with brackets and once I switched to Atom (just to test) sass started writing on css file real time.
Tried with both sass --watch sass:css (Directory based watch) and sass --watch sass/app.sass:css/app.css (file based), and both worked fine.
I am using windows 7 to compile .scss with an application known as Prepros. (http://alphapixels.com/prepros/ ). I also downloaded the Gumby Framework(http://gumbyframework.com/) into my document root directory of localhost web-server. My goal is to use the gumby framework along with Prepros.
When I attempt to compile the scss file, I am receiving the following error:
Syntax error: Undefined operation: "power(golden_ratio(), 1) times 16px".
on line 52 of Z:/Ampps/www/Gumby-master/sass/extensions/modular-scale/stylesheets/_modular-scale.scss
from line 23 of Z:\Ampps\www\Gumby-master\sass\gumby.scss Use --trace for backtrace.
Also, if it is helpful, this is the config.rb file contained within the folder www\Gumby-master :
# Require any additional compass plugins here.
# Tell compass where to find local extensions
# If you followed directions and ran 'gem install modular-scale' comment the next two lines out:
extensions_dir = "sass/extensions"
Compass::Frameworks.register('modular-scale', :path => File.expand_path("# {extensions_dir}/modular-scale"))
# Uncomment these to use regular Ruby gems.
# require 'modular-scale'
# require 'sassy-math'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
# You can select your preferred output style here (can be overridden via the command line) :nested or :expanded or :compact or :compressed:
output_style = :compact
# 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
Lastly,I reviewed this thread, but I did not find it helpful.
SOLUTION: I tried several things to fix this, and I am not absolutely which of them were responsible for fixing it.
Install ruby development kit
Install rails
Install gumby-framework gem (https://github.com/jorgecoca/gumby-framework)
Verify that the modular-scale gem is installed ( https://github.com/Team-Sass/modular-scale)
Use Advanced Prepros options to use third-party compass plugins (http://alphapixels.com/prepros/docs/sass-compass.html) (NOTE: initially I made the mistake of giving this path C:\Ruby193\lib\ruby\gems\1.9.1\gems, when in fact I realized I must provide this one C:\Ruby193\bin\ruby.exe, just like in the picture in the Prepros manual.)
-as stated in this thread, I opened my compass config.rb and commented out Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale")), and un-commented #require 'modular-scale' and #require 'sassy-math'.
I also ran into this exact same issue. So I would like to share things which I did.
Gumby framework README.md file states "Note: Please use modular scale 1.0.6, 2.x has not been integrated yet". Make sure the version of modular scale installed on your machine is 1.0.6!
How to check?
Let's assume the location of your Ruby installation is "C:\Ruby200".
Go to C:\Ruby200\lib\ruby\gems\2.0.0\gems. In this directory, you will see all the gems that were installed on the machine. (You should see sass, compass, modular-scale among others)
Make sure it says "modular-scale-1.0.6". If it doesn't, then delete the version you have over there. If you see multiple sassy-math over here, don't worry. We just want one modular-scale on the machine!
How to install Modular Scale v1.0.6?
Run gem install modular-scale v 1.0.6
What else to watch out for?
Like Daniel said, open your config.rb. Make sure you have the following lines in it!
#Require any additional compass plugins here.
require 'modular-scale'
require 'sassy-math'
Whatever you do, don't have the following code in your config.rb file. For this code to truly work, you have to have a directory called extensions in your sass directory, and you have to copy all the modular-scale binaries into that directory.
extensions_dir = "sass/extensions"
Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))
If you run into any other problems and somehow manage to solve it, please do add your answer here! The entire installation experience is terrible at the moment.
+1 for Parth Shah -- that worked for me. But the command to install modular-scale 1.0.6 is actually:
gem install modular-scale -v 1.0.6
He missed the hyphen before the v.
BTW as per this date, there has been a Gumby update so that Gumby supposedly now works with these compass, sass and modular-scale versions -- see below for install commands.
gem install compass -v0.12.4,
gem install sass -v3.2.18
gem install modular-scale -v2.0.4
I am still running the older versions but this update has been confirmed by other Gumby users.
Brand spanking new to foundation 4,
I've installed all dependancies, compass, sass, and zurb-foundation.
ran compass create testproject -r zurb-foundation --using foundation --syntax sass
... worked fine.
ran sass --watch sass:css in the testproject directory and I keep getting errors like so...
error /Users/figmints/Sites/testssss/sass/app.sass (Line 5: File to import not found or unreadable: normalize.
Load paths:
/Users/system/Sites/testproject
/Users/system/Sites/testproject/sass)
In the config.rb, the first line is require 'zurb-foundation'
Isn't this supposed to make the file normalize.scss visible to the project so that I do not have to copy each file located in my gems folder?
Could anyone direct me towards my mistake, please?
Thanks,
Seth
As far as I know, there's no sass watch. What you need to do is:
Navigate to your project's root folder (which is where your Compass project's config.rb should be) through your terminal
Type compass watch and hit Enter
See the magic happen (if you have nicely configured your config.rb, that is)
A Compass project should be watched by Compass. The watch function is why—IMO—Compass is so nice: it does something Sass naturally doesn't do.
Have you tried compiling using compass watch in your testproject root directory, instead of compiling with Sass? Because you created your project with Compass, so you should use Compass to compile.
I'm on Windows, and I have SASS running successfully in my project. Now, I want to include compass so I can take advantage of the pre-written mixins, etc.
First I simply tried this statement from within my working sass file: #import "compass/css3/transform";
Naturally, this didn't work since I didn't have compass installed, so I navigated to my Ruby directory and successfully installed the compass gem within c:/ruby193/bin. I can now successfully create compass projects within c:/ruby193/bin, but that doesn't do me much good.
I need run compass commands within my site, which lives here: c:/inetpub/mysite. When I try to do so, however, I get compass is not recognized as internal or external command
How can I get compass to work where I want it?
EDIT: a large part of my problem was that Ruby was installed without adding itself to the Windows Path environment variables, so I could only run SASS and Compass commands from within the C:/Ruby193/bin directory. This caused problems for me since, as a result, I thought that was where I needed to install compass. Anyhow, after figuring that out, I still haven't been able to get compass to work, but am planning on uninstaling SASS, Compass, and Ruby and giving this thing another try from scratch. I marked Stooboo's answer as correct since it was the best and most accurate, especially given the information he had to work with. Thanks!
here's how I do it
(One time)
install ruby http://rubyinstaller.org/
install compass, in a command window enter
gem install compass
to add compass to an MVC project, navigate to project folder and in a command window enter
compass create
you will get the default config.rb ... but here is my usual one
http_path = "/"
css_dir = "content/css"
sass_dir = "content/sass"
images_dir = "images"
javascripts_dir = "scripts"
to install bootstrap (for more info see https://github.com/thomas-mcdonald/bootstrap-sass)
add
require 'bootstrap-sass'
to your config.rb
enter (in your command window)
gem install bootstrap-sass
(I had to do a (in your command window)
gem update
after this but you may not need to)
enter (in your command window)
compass install bootstrap
(then ... every time you open the solution in Visual Studio)
navigate to project folder
in a command window enter
compass watch
(this will monitor project for saves and re-compile the scss files)
Hope that helps
Cheers
Stu
To install Compass, you should open your Windows console with Win+R, cmd and run:
gem update --system
gem update
gem install compass
Don't forget to remove all the stuff that you littered you Ruby installation with.
Use this command in order to add GEM to the Windows Path environment variables:
set PATH=C:\Ruby200-x64\bin;%PATH%
In the Ruby command you should write:
gem update --system
(this block of code updates all the gems in the Ruby)
Then you install sass like it:
gem install sass
(You said that you already has sass, so you don't need to write this code again.)
Then, you write this line:
gem install compass
(Now, you will have compass in your machine)
To know the version that was installed, you can write:
compass --version
To create a new project in your desktop machine, you can write this line of code:
compass create desktop/my-project
(This will create a compass folder in the desktop of your machine called my-project. I hope this is helpful.