From a58a66c4c251ded431a82d907dbfc1342db390e5 Mon Sep 17 00:00:00 2001 From: Scott Davis Date: Mon, 25 Apr 2011 01:44:08 -0400 Subject: [PATCH] added application integration to turtorials --- doc-src/Gemfile.lock | 2 +- .../help/tutorials/integration.markdown | 83 +++++++++++++++++++ 2 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 doc-src/content/help/tutorials/integration.markdown diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index f489eada..4a75775a 100644 --- a/doc-src/Gemfile.lock +++ b/doc-src/Gemfile.lock @@ -8,7 +8,7 @@ GIT PATH remote: .. specs: - compass (0.11.beta.7.5962a85) + compass (0.11.beta.7.e3aa9aa) chunky_png (~> 1.1.1) fssm (>= 0.2.7) sass (>= 3.1.0.alpha.249) diff --git a/doc-src/content/help/tutorials/integration.markdown b/doc-src/content/help/tutorials/integration.markdown new file mode 100644 index 00000000..daac952b --- /dev/null +++ b/doc-src/content/help/tutorials/integration.markdown @@ -0,0 +1,83 @@ +--- +title: Application Integration +layout: tutorial +crumb: Appliction Integration +classnames: + - tutorial +--- +# Application Integration + +## Ruby on Rails + +### Rails 3 + compass init rails /path/to/myrailsproject +### Rails 2.3 + rake rails:template LOCATION=http://compass-style.org/rails/installer + +## Sinatra + + require 'sinatra' + require 'haml' + require 'sass' + require 'compass' + + configure do + Compass.configuration do |config| + config.project_path = File.dirname(__FILE__) + config.sass_dir = 'views' + end + + set :haml, { :format => :html5 } + set :sass, Compass.sass_engine_options + end + + get '/screen.css' do + content_type 'text/css', :charset => 'utf-8' + sass :screen + end + +If you keep your stylesheets in “views/stylesheets/” directory instead of just “views/”, remember to update sass_dir configuration accordingly. +Check out this [sample compass-sinatra project](http://github.com/chriseppstein/compass-sinatra) to get up and running in no time! + +[Sinatra Bootstrap](http://github.com/adamstac/sinatra-bootstrap) - a base Sinatra project with support for Haml, Sass, Compass, jQuery and more. + +## Nanoc3 + +### Minimal integration: just drop it in + +One simple route for lightweight integration is to simply install compass inside nanoc. Then edit config.rb to point to the stylesheets you want to use. This means you have to have the Compass watch command running in a separate window from the Nanoc compilation process. + +Example project that works this way: http://github.com/unthinkingly/unthinkingly-blog + +### More formal integration + +At the top of the Nanoc Rules file, load the Compass configuration, like this: + + require 'compass' + + Compass.add_project_configuration 'compass/config.rb' # when using Compass 0.10 + Compass.configuration.parse 'compass/config.rb' # when using Compass < 0.10 + +Your Compass configuration file (in compass/config.rb) could look like this (you may need to change the path to some directories depending on your directory structure): + + http_path = "/" + project_path = "." + css_dir = "output/assets/style" + sass_dir = "content/assets/style" + images_dir = "output/assets/images" + + # when using SCSS: + sass_options = { + :syntax => :scss + } + + +To filter the stylesheets using Sass and Compass, call the sass filter with Sass engine options taken from Compass, like this: + + filter :sass, Compass.sass_engine_options + + +### Nanoc Projects using the formal approach + +* [nanoc Bootstrap](http://github.com/adamstac/nanoc-bootstrap) - a base nanoc project with support for Haml, Sass, Compass, jQuery and more. +* [nanoc & Compass Example Project](http://github.com/ddfreyne/nanoc-bootstrap-compass) \ No newline at end of file