Undefined mixin susy-grid-background in susy 2 - sass

I'm trying to get Susy 2 to work on my computer. I have tried several ways of installing but none of them seem to completely work.
First attempt:
Installed compass, susy and sass manually through a gem install compass etc. I then created a project (compass create) and included the #import 'susy'. All seemed well but then the span mixin would not work.
Second attempt:
Uninstalled compass, sass and susy. Installed the gem compass-susy-plugin. Created a compass project with -r susy -u susy. This time span worked but the susy-grid-background mixin was undefined.
Third attempt:
Uninstalled compass susy plugin, compass and sass. Installed sass, susy and the gem compass --pre. Now the span mixin works but the susy-grid-background mixin is undefined. We are really not getting this. It is supposed to be really easy but something is going terribly wrong here.
I now have this Gem list:
Compass (1.0.0.alpha.19),
Sass (3.3.8, 3.2.19),
Susy (2.1.2)
I have tested this on two different computers (mac and windows). Same results.
My screen.scss has a include of base and in the base there is an include of susy. Config.rb has the require susy in it. There is no package.json file.
I hope someone has some pointers.

If it's just the grid that's the problem, I use:
#include container(show);
or
#include container(show overlay);
Have you looked up the documentation on http://susy.readthedocs.org/en/latest/ ?

Related

Can't get Compass to watch my Susy project

I am a newb to the command line. The furthest I have taken it was to install the sass version of Foundation successfully. I want to try out Susy to see if it suites my needs better. I was following the 11 videos series on Susy Tutorials on Level Up Tuts by Scott Tolinski. I followed him step by step during the installation process all the way up until the "compass watch" command within my root folder. I was then thrown this error:
NoMethodError on line ["31"] of /Users/bradgabel/.rvm/gems/ruby-2.0.0-p247/gems/compass-1.0.0.rc.0/lib/compass/sass_compiler.rb: undefined method `on_compilation_starting' for #Sass::Plugin::Compiler:0x007fe4a41def80>
Run with --trace to see the full backtrace
The gems I have installed are:
compass (1.0.0.rc.0, 0.12.7)
compass-core (1.0.0.rc.0)
compass-import-once (1.0.4)
sass (3.4.0.rc.2, 3.2.19)
susy (2.1.3)
Try to put this on your sass file.
#import "susyone";
hope can solve your problem.
I am also having issues using compass watch from the command line but mine was after I updated my susy / sass gems. I have found that using preros was much easier and you can configure it to use the same config.rb file + your system ruby gems without having to navigate the command line. Best of luck.

Susy 2 Framework for SASS undefined mixin ' span'

I am having a small issue using Susy in that it seems to be using the old syntax.
I have the latest version of SASS (3.3.6). I have the latest version of SUSY (2.1.2). I have the latest version of Codekit (1.9.3).
I have included this in my global.rb file:
require "susy";
I have also imported this as below:
#import 'susy';
So everything should be fine. Using standard variables for the setup I have added the following code to a simple div block:
#include span(5);
Which should span the block 5 columns out of 10. Simple enough but I get an error:
Undefined mixin 'span'
Correct me if I am wrong but is this not the new syntax, as shown here:
http://susydocs.oddbird.net/en/latest/install/
If I use this:
#include span-columns(5 omega);
Everything is fine. But this is using the old syntax for Susy One. Am I missing the obvious here? I would appreciate any direction.
After lots of uinstalling gems and reinstalling gems I was able to get things working.
I used the following:
sudo gem uninstall compass
sudo gem install compass --pre
This seems to have fixed the problem for me.
So these are the gems I have installed:
Compass (1.0.0.alpha.19)
Sass (3.3.8, 3.2.19)
Susy (2.1.2)

Undefined mixin after upgrading to most recent versions of Sass, Compass, Breakpoint-Sass and Toolkit-Sass

After upgrading today to the most recent versions of Sass, Compass, Breakpoint-Sass and Toolkit-Sass I get for every mixin used im my theme an undefined mixin error.
my current gemfile includes these version:
gem 'compass-aurora', '~>3.0.8'
gem 'toolkit', '~>2.0.0.alpha.3'
gem 'breakpoint', '~>2.4.1'
after doing again a bundle install toolkit version 2.0.0.alpha.5 got installed.
Might there be going on something and do I have to be a bit more patient? I know, toolkit is in alpha state ...
Thanks for any advice
Compass Aurora isn't yet compatible with with all of the new goodies in Toolkit and Breakpoint. When it is, the gem will be updated.

Middleman, Compass and Formalize

I have been trying to get middleman, compass and formalize to work together, but so far without too much luck.
I did install the Compass Formalize plugin
sudo gem install compass_formalize
... and I did add the obligatory require to config.rb
require "compass_formalize"
... but the effect is that my stylesheets can be located (with #import "formalize";
), but I don't know how to pull in the JavaScript files. Anyone?
jquery example:
cd project_dir
compass install formalize/jquery
jquery.formalize.js should be in the javascript directory specified in config.rb

How to use compass with rails 3.1

I have searched and searched and all I could see was that to use compass with rails 3.1 was to just edit the Gemfile like so:
gem 'compass', :git => 'https://github.com/chriseppstein/compass.git', :branch => 'rails31'
gem 'sass-rails', "~> 3.1.0.rc"
Yes I understand that but what next? Every tutorial I saw said just that, use that certain fork. But I am still having trouble with using compass with rails 3.1.
I did this:
$ compass init rails . --syntax sass
directory ./app/stylesheets/
create ./config/compass.rb
create ./app/stylesheets/screen.sass
create ./app/stylesheets/print.sass
create ./app/stylesheets/ie.sass
And since 3.1 was using assets now, I just transferred all those files to 3.1. Also, I am using compass-960 plugin, so where do I require it? I tried adding a compass.rb with require 960 and require html5-boilerplate and I still keep getting errors:
Error compiling asset application.css:
NoMethodError: undefined method `Error' for Compass:Module
(in /Users/eumir/rails_apps/kiseki/app/assets/stylesheets/screen.sass)
NoMethodError (undefined method `Error' for Compass:Module
(in /Users/eumir/rails_apps/kiseki/app/assets/stylesheets/screen.sass)):
I tried doing compass compile and it gave me this:
$ compass compile
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.
As I said, I already edited my compass.rb so I am still stumped as to how to go about with this. Any help?
UPDATE: Seems like there is a better way !
Source: http://spin.atomicobject.com/2011/07/12/sass-sprockets-compass-with-rails-3-1/
UPDATE 2(dec 2, 2011): Chris Eppstein, creator of Compass posted this Github Gist of how to integrate Compass with Rails 3.1: https://gist.github.com/1184843
I now prefer this method over mine, as I noticed a great speed improvement at compilation time when using livereload.
MY METHOD:
(I now consider it deprecated, but maybe it can be useful in some cases, so here it is for reference:)
First, in your Gemfile, add:
gem "compass", "~> 0.12.alpha.0"
And don’t forget to execute a
bundle update
Then, in config/application.rb:
config.generators.stylesheet_engine = :sass
Rename application.css.scss to application.css.sass, or create it, and replace its contents by:
#import compass
#import _blueprint
(If you want to keep the new Rails 3.1 manifest code at the beginning of the stylesheet, you’ll have to replace the ‘/* */’ comments by the sass-syntax version ‘//’ at the beginning of each line)
Now, to test if compass and blueprint mixins work, add some code to the same file application.css.sass:
#import compass
#import _blueprint
body
background: black
+linear-gradient(color-stops(white, black))
+column(5)
Run your rails server with
bundle exec rails server
Load your app in a browser, and visit http://localhost:3000/assets/application.css
If everything went well, you should see the compiled code.
Source:
http://blog.pixarea.com/2011/07/using-compass-blueprint-semantic-and-sass-syntax-in-rails-3-1/
The solutions in the other answers are deprecated with the latest version of Compass, v0.12, which requires an adapter to work with a rails app. The Compass author, Chris Eppstein, has put installation instructions on github:
https://github.com/compass/compass-rails
This adapter supports rails versions 2.3 and greater
Peter Gumeson from the compass users groups pointed me to a fix for this:
https://groups.google.com/forum/#!msg/compass-users/mU5HBt8TCIg/2Rt7iSESTSAJ
Here's his message:
Hi gang. This github issue might help out.
https://github.com/sporkd/compass-html5-boilerplate/issues/19
I am pretty much running everything on edge right now. So my gemfile
looks something like this:
gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sass-rails', '~> 3.1.0.rc2'
gem 'haml', :git => 'git://github.com/nex3/haml.git'
gem 'haml-rails'
gem "compass", :git => "git://github.com/chriseppstein/compass.git", :tag => "0.12.alpha.0"
gem 'compass-html5', :git => 'git://github.com/sporkd/compass-html5.git'
I'm working on the rails generators right now, so it should not be too
far off. But this should at least get you going.
Peter
*changed branches as said by choonkeat
YOu can download the compass directory, dump it in vendor/assets/stylesheets so your directory structure is vendor/assets/stylesheets/compass Then from your main application stylesheets include the compass mixins ass required #include compass/reset;

Resources