I'm pretty new to the whole world of Compass and SASS, so I might be missing something fundamental here. I'm running into a structuring problem with Foundation 5.
How does one get this all to work neatly within an existing (git) project?
When I run foundation new myproject, it clones the basics into 'myproject': a bower_components/ folder for the dependencies, a config.rb in the root, an 'scss' folder where I can modify the SASS files with compass watch running in the background to generate my CSS files, and an example index.html file. On its own, I think I get how it all works.
I have an existing project in which I intend to use Foundation 5. My first instinct was to try to "initialize" Foundation in the root of my project: foundation new .
Since it's using git, of course it complained the dir wasn't empty. Fair enough, so I made it a sub-folder within my public_html: foundation new foundation. I placed config.rb in the root of my project and updated the paths, so I can just run compass watch from my root. All this worked pretty neatly, I played around with the scss files and watched my css file get updated accordingly. Then I committed the result and pulled it from a different location. 'foundation', being a repo inside of a repo, didn't get committed along with everything else. Most of the stuff inside there doesn't matter - foundation new whatever loads it all up again, and .gitignoring /bower_components is sensible. But the custom code inside the 'scss' directory I do need. I tried setting up my project in a different way, having the 'scss' dir outside of the bower directory, and setting it as the sass_dir in config.rb.
That setup makes sense to me, but I can't get it to work: running compass watch fails:
File to import not found or unreadable: foundation.
My config.rb right now:
http_path = "/"
css_dir = "public_html/assets/css"
sass_dir = "foundation/scss"
images_dir = "public_html/assets/img"
javascripts_dir = "public_html/assets/js"
How do I tell it explicitly where foundation is? I've tried playing around with 'add_import_path' in config.rb, but that didn't do much.
I have the feeling I'm missing something fundamental here, or maybe I'm overthinking it. Google isn't helping much since Foundation 5 is pretty much fresh out of the oven. Can somebody give me a push in the right direction?
Thanks!
I had a similar problem, I ended up downloading foundation-compass-template instead of using the foundation command line
Unzipping it into the root of my project and then
bower install
Here is the config.rb that came along with it:
# 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 = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"
I know it's not a direct answer but hopefully that project gives you a some direction
Hope this helps
The accepted answer turned out to be part of the solution. It worked, and looking at the config.rb again I realized the right way to tell Compass where to look for Foundation. D'oh.
My structure is now as follows:
config.rb
public_html/
--assets/
----scss/
----css/
----foundation/
------bower_components/
--------foundation/
----------scss/ # this is the dir that needed to be imported from config.rb
Config.rb:
add_import_path "public_html/assets/foundation/bower_components/foundation/scss" # *magic*
http_path = "/"
css_dir = "public_html/assets/css"
sass_dir = "public_html/assets/scss"
images_dir = "public_html/assets/img"
javascripts_dir = "public_html/assets/foundation/js"
As you can see, this way things are exactly like what I was hoping to get: Foundation's stuff inside of public_html/assets/foundation - don't need to touch that directory for anything except running bower update from time to time - and my custom scss resides in public_html/assets/scss.
Thanks for giving me that much-needed push!
Related
I am trying to set my css output file from the config.rb file to the root level of my main directory and to be named "style.css". The issue I am having is I when I set all of the filepaths in the config.rb like the following it all works fine.
http_path = "/"
css_dir = "assets/css"
sass_dir = "assets/sass"
images_dir = "assets/images"
javascripts_dir = "assets/js"
fonts_dir = "assets/fonts"
output_style = :compressed
environment = :development
But I develop a lot of WordPress websites locally and need to have the css_dir = "assets/css" be set to the root of the main directory and to be named style.css. if I try things likecss_dir = "/" it breaks and doesn't output my style.css to the root.
Any suggestions please as to how I may do this so I don't have to stick with the current way of moving my output from assets/css/style.css to the root level manually upon deployment, (this has been my previous solution). This would not be ground breaking in my efficiency or my workflow, but it seems so simple and that it should be an option, so I have to ask the community.
I also tried Chris Coyier's suggestion here and that didn't seem to work either http://css-tricks.com/compass-compiling-and-wordpress-themes/
Maybe this will help:
When setting your http_path in config.rb, you are telling Compass what the path to the current directory is. It's only really used if you have absolute paths turned on and are using Compass URL helpers. Compass doesn't know what your "real" project root is (when it comes to PHP CMSes like WordPress or Drupal, for example).
Let's take the following document structure:
project_root
- foo
-- bar
--- baz
baz is going to be our theme folder.
Now when it comes to compiling your CSS, I'm not entirely sure what you're asking, whether it's that you want to change the CSS Directory for your production build only and keep it at assets/css for your development, or just change the directory. Either way, I've got you covered. For both of these, we're going to assume that the outside of Compass root directory we want the CSS generated in is project_root
Change CSS Directory Path for Production Build Only
Set css_dir = (environment == :development) ? 'assets/css' : '../../../' to compile your CSS into assets/css during development builds (compass compile/compass watch) and into project_root during production builds (compass compile -e production --force). The key here is that we're using Unix style directory changing to place the file outside of our theme directory.
Change CSS Directory Path for All Compiling
Set css_dir = "../../../" and simply runcompass watch/compass compile` as normal.
Either way, don't have Compass rewrite your file name. Name your Sass file style.scss
Having a strange problem.
I'm using SASS, I have compass installed, but don't need to use it because I have LiveReload.
With LiveReload I've pasted the script into my index2.html file. Then in Output Paths I have my sass/main.scss folder targeted to the css/main.css folder. However for some reason it still outputs to a stylesheet folder.
This is driving me nuts, how do I force SASS or lifereload to make sure I'm outputting to the correct folder? I never created the stylesheets folder and when I deleted and make a change and save my main.scss file it recreates the stylesheets folder and puts main.css inside that X_X
Edit: I believe it is a config file somewhere in this python project. I Found a config.rb file, but path seems fine there, so it must be another setting somewhere... I'm going to keep looking, or I could ask the Python dev Monday
config.rb
# Require any additional compass plugins here.
require 'compass/util'
require 'compass/browser_support'
require 'compass/sass_extensions'
require 'compass/version'
require 'compass/errors'
require 'compass_twitter_bootstrap'
require 'breakpoint'
require 'toolkit'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "scripts/js"
environment = :production
output_style = (environment == :production) ? :compressed : :expanded
The problem was how it was setup by the previous developer, not that he was causing a bug, it was just the way he had it setup.
I created a new folder and moved my files there and now my SCSS files in the SASS folder does compile correctly into the CSS folder.
Just change your link to your css with the appropriate styles folder you speak of. Wouldn't that be just as quick of a solution?
I decided to use the Sass version of Foundation4 as the CSS one is virtually impossible to edit efficiently now.
I followed the instructions here: http://foundation.zurb.com/docs/sass.html
These advised me to install the gem (no problem) then install compass then create a project, which I did in wwwroot.
All good so far. It then goes on to advise me to "download the files from Github (grab the scss/ and js/ directories) and put them into your project directory"
Now why in the name of a fish on a bicycle would the instructions advise me to do this when the previous step on the command line (compass create -r zurb-foundation --using foundation) creates a folder already in the root directory for my project - albeit named differently - that contain similar if not identical files? There's already a "javascripts" folder with "foundation" and "vendor" subfolders that contain largely the same files - although some are different sizes.
Am I missing something? The included "index.html" file reference the "javascripts" folder so why am I meant to be including "js" from the github? This is very confusing when you're new to the technology!
After following the installation instructions I now have "foundation.scss" and "app.scss" files which seem to be largely the same apart from one (app.scss) has lots commented out. Which one am I meant to use?
It seems to me that the instructions are basically out of date. It appears that I don't need "js" from github but I do need "scss". The contents of this scss folder look like they need to go into the "sass" folder created when the project is made and the "foundation.scss" file can be deleted as "app.scss" is a copy of it.
I have no idea where the base "app.scss" file is hoping to "#import foundation" from as there is no "foundation" folder created on installation/creation of project. Maybe I'm missing something but it's all very confusing. Could someone please clarify what I need to start with and what I can delete/ignore?
When you install the gem, all the proper Foundation files are installed for you in the gem cache. Compass will pull all the F4 SCSS files into your project via the #import directive from foundation.scss.
The project docs in the Github repo show the latest Compass instructions for building your F4 project.
https://github.com/zurb/foundation/blob/master/docs/sass.html.erb
It sounds like you are mixing the Standalone instructions into the Compass ones.
If you have run this:
[sudo] gem install compass
cd path/to/where-you-want-your-project
run compass create <project-name> -r zurb-foundation --using foundation
You don't need Github or the Standalone instructions.
The steps below outline the manual steps of building an F4 project. I think you're stuck on STEP 4, so focus on that part.
STEP 1:
Download for easy access these two archives:
Foundation Vanilla:
http://foundation.zurb.com/files/foundation-4.1.6.zip
Foundation Master:
https://github.com/zurb/foundation/archive/master.zip
CD into your www root directory:
STEP 2:
Create this file:
/config.rb
require 'zurb-foundation'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
relative_assets = true
line_comments = true
Switch output_style = :compact or :compressed and line_comments = false for Production (when going live).
STEP 3:
Copy/Move index.html from Foundation Vanilla into your root www directory.
Edit line 11 and change foundation.css to app.css in the style tag.
STEP 4:
Create this directory and file:
/scss/
Create app.scss - This is your site/app stylesheet and we'll import Normalize and F4 in it.
Copy this into it:
// Global Foundation Settings
// #import "settings";
// Comment out this import if you don't want to use normalize
#import "normalize";
// Comment out this import if you are customizing you imports below
#import "foundation";
// Your own SCSS here...
If you want to override some F4 SaSS variables you will need the _settings.scss file. For now I would skip this step and leave it commented out until you are more familiar with F4.
STEP 5:
Create this directory (files automatically written here):
/css/
app.css - will be written here from /scss/app.scss by Compass. Normalize and all the F4 CSS will be inside it, plus any of your own CSS you've added.
This happens automatically, you don't need to do anything except have the required gems installed and your Compass config file from STEP 2.
STEP 6:
Create this directory and copy/move these files into it:
/js/
Copy/Move /js/foundation.min.js from the Foundation Vanilla download here.
If you need your own app.js create/place it here and link to it last in your footer.
/js/vendor/
Copy/Move /js/vendor/custom.modernizr.js from the Foundation Vanilla download into here.
Copy/Move /js/vendor/zepto.js and /js/vendor/jquery.js from the Foundation Vanilla download here.
Later, when you feel more comfortable, you can cherry pick individual Foundation JS files from Foundation Master and concatenate them into a smaller lib here as foundation.min.js.
That should do it.
Check out this file in my www repo, as it shows a working F4 setup:
https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html
You can also poke around there for how to integrate Grunt.js for automated build of the SCSS and JS with concatenation and minification:
https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js
Without being as adept as #jhauraw, I did notice something else.
I installed FOundation through the Compass app. Being a novice with Compass, I too was looking for the "foundation" folder that would contain all the various Foundation SCSS files. And when I looked at the _settings.scss file that was present, it appeared that everything was commented out. What I know understand (still as a novice towards Compass) is that the "foundation" file lives within a resource library within Compass. When needed, these files are imported when generating the CSS file. The _settings.scss file with all the commented out fields is an override file. So if you remove the comments for a particular variable or mixin, it will override the originals hidden in the Compass library. The compiled CSS seems to contain everything that's needed.
I wonder how can I solve to make my project output css file to compile in compressed format, cause there is not an option for that if i install compass to my project
The option should be on the right hand column, but there isnt. I also did choosen the output style: compressed in codekit preferences for sass/scss.
Note again I have problems with output compress only when compass is installed on my project.
P.S: anyone know a good snippet collection for sccs -> compass? for sublime text 2
Ohh i found out how to solve it, in config.rb file:
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
fonts_dir = "fonts"
output_style = :nested
if i edit the output_style directly from there it will work just fine with compass, just make :compressed
anyways im still curious if there is a good snippet vocabulary for compass #includes (mixins)
I was using Sass on an existing site and decided to get Compass up and running on Win7x64. Ruby, HAML, Compass all installed fine (afaik).
I have a project at c:\project with a static files served out of c:\project\static with a directory structure that has to stay the same. I went into c:\project\static and ran this:
compass create css-compass
This resulted in the following dir structure
c:\project\static\css (previously existed; output css)
c:\project\static\css-sass (previously existed; source css)
c:\project\static\css-compass (the new compass dir created by compass)
And here is my config.rb:
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "..\\css"
sass_dir = "..\\css-sass"
images_dir = "images"
javascripts_dir = "javascripts"
When I go to c:\project\static and run compass watch compass-css, I get the following error:
Nothing to compile. If you're trying
to start a new project, you have left
off the directory argument. Run
"compass -h" to get help.
However, if I create symlinks inside c:\project\static\css-compass from css->..\css and css-sass => ..\css-sass then everything works just fine.
What the what?
facepalm
Apparently you need to set relative_assets = true in your config.rb file. Why this isn't the default is beyond me. Oh well!
im late :-)
You can also use relative Path's in project_path
Example
project_path = "../src/main/webapp/"
More Details in this Answer: Can't make grunt-contrib-compass work