I was wanting to test the latest SASS version. In the process I updated to Compass 1.0 version. I was unable to compile cleanly because of two things.

Change in the way SASS handles global variables:
DEPRECATION WARNING

Change in the way Compass handles browser versions
http://beta.compass-style.org/help/documentation/tuning-vendor-prefixes/

I know this is pre-release version right now, but SASS 3.3 is in release candidate stage. I assume that Compass will closely follow.

I will see if I have time submit a patch. I just thought I would let people know about the upcoming changes in the tools.

CommentFileSizeAuthor
#5 Gemfile.txt270 bytesrootwork
#4 zen-2188263-4.patch13.46 KBMustangGB
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

echoz’s picture

Version: 7.x-5.x-dev » 7.x-6.x-dev
Category: Bug report » Task
Priority: Minor » Normal

Moving to 7.x-6.x-dev Task since release versions of sass / compass are fine, although these updates are soon.

Marked #2193249: Zen's use of "$legacy-support-for-ie{6,7,8}" variables UNSUPPORTED in compass v1.0.0x as duplicate.

pingers’s picture

I think that's fine to move to 7.x-6.x, but the docs @ https://drupal.org/node/1548946 need updating to say what specific version of sass should be installed. Just running gem install sass will give you 3.3.x (at the moment). If anyone know what that should be.. :)

ckrina’s picture

By the moment, the last stable versions I've tested of each gem and that work together are:

WORKS

  • breakpoint (2.0.7)
  • compass (0.12.3)
  • sass (3.2.14)
  • susy (2.0.0.alpha.4)
  • zen-grids (1.4)

STILL NOT WORK

  • breakpoint (2.4.1)
  • compass (1.0.0.alpha.18)
  • sass (3.3.2)
  • susy (2.0.0)
  • zen-grids (2.0.0.beta.2)

To get the install command for each gem, and know each dependencies and versions:

Example SASS https://rubygems.org/gems/sass/

Some more info about deprecated browser legacy support method: http://www.atendesigngroup.com/blog/new-browser-support-features-compass-1x

MustangGB’s picture

Status: Active » Needs review
FileSize
13.46 KB

First attempt.

Notes:
- SASS only, not bothered with CSS yet
- "Legacy IE support" section text in _init.scss needs rewriting
- Not sure if "if not 6 and 7" is needed to be so explicit
- Slight additional tweak to _watermark.scss, otherwise %watermark__wrapper isn't declared which kicks out a warning

Using:

sass (3.3.4)
compass (1.0.0.alpha.19)
compass-core (1.0.0.alpha.19)
compass-import-once (1.0.4)
zen-grids (2.0.0.beta.2)
rootwork’s picture

FileSize
270 bytes

While the patch is getting worked out, here's a Gemfile for folks who hit this and want to quickly recover.

Add this file to your theme folder, remove the .txt extension (so the filename is just "Gemfile") and run bundle install. If you have any other required gems in your config.rb you'll want to add them to the bottom of the Gemfile -- for instance I'm using sass-globbing and sassy-buttons; you can remove these lines if you're not using them. The version is optional, and for those gems it was fine to just omit it and use the most recent one.

Then commit the Gemfile and Gemfile.lock to your repository. Don't commit the .bundle directory that gets created, though this might already be globally ignored in your .gitignore.

More information about Bundler at http://bundler.io

Don't want to sidetrack from the patching, just wanted to put this up here in case it helps.

JohnAlbin’s picture

The problem is that Compass 1.0.x is still alpha and buggy, but Sass 3.3 is an official release. *sigh*

I've never even tried Compass 0.13 with Sass 3.3. And I'm not sure that option even makes sense.

Bundler is going to be a MUST if we are to avoid version confusion. We could either make 7.x-5.x default to Sass 3.2 and Compass 0.13 with Bundler or re-write everything. hmm…

rootwork’s picture

Yeah, it's an annoying combo at the moment.

I think Bundler would be a nice way to sidestep these issues from cropping up in the future, though I agree that I don't really know how 0.13 and 3.3 play together. But if major (or even minor) versions of Zen could get tied to specific versions of Compass and Sass through Bundler I think that would help.

MustangGB’s picture

When I tried they didn't play well together, I'd suggest to just go for it and use 3.3 + 1.0, at least for 7.x-6.x, which is what this thread is about after all.

To be honest though, my main concern is being able to use Zen Grids 2.x out of the box.

iamfredrik’s picture

I'm using Zen 7.x-5.5 with Sass 3.3.4 and Compass 1.0.0.alpha.19 and it seems to compile just fine despite the deprecation warnings. I've detected no problems in the browsers I've tested so what's the downside to keep using this?

BrightBold’s picture

+1 for 3.3 & 1.0. CodeKit just upgraded to those two versions, which brought me here looking for fixes.

rooby’s picture

Compass now has a 1.0.0 release.

rooby’s picture

Priority: Normal » Major
rooby’s picture

Is it likely that a fix for this will end up in the 7.x-5.x branch?

jfarry’s picture

For anyone else who's after the installation code for a previous version of compass:

On Windows:
gem install compass --version 0.12.3

On Linux:
sudo gem install compass --version 0.12.3

This will also install:
Sass 3.2.14
FSSM 0.2.10

Anything else you use outisde of those will need their own "gem install".

pingers’s picture

Shameless plug... http://www.trellon.com/content/blog/managing-gems-bundler
Without using something like bundler, you'll still run into troubles if you don't specify which gem versions you want to use (the newest installed version of a gem is used by default).

charlesroper’s picture

Hello, new to Zen (and pretty inexperienced with Drupal generally, to be honest) and I found this issue as a result of the deprecation warnings I am seeing when compiling the Sass. I can turn those warnings off for now, but I wanted to draw attention to another problem I am seeing. I'm using Zen 7.x-6.x.

Doing a gem install compass installs Compass 1.0.1 and Sass 3.4.1. Trouble is, there seems to be something in Compass 1.0.1 that breaks the default out-of-the-box layout. I'm not experienced enough to say what the problem is, but it looks like the calculations generated by Zen Grids are off with Compass 1.0.1. For example, the following is generated by Compass 0.12.3:

media="all"
@media (min-width: 960px)
.sidebar-first .main-content {
float: left;
width: 80%;
margin-left: 20%;
margin-right: -100%;
}

And this is the code generated by Compass 1.0.1:

media="all"
@media (min-width: 960px)
.sidebar-first .main-content {
float: left;
width: 400%;
margin-left: 100%;
margin-right: -500%;
}

It's easy enough to just use Bundler to make sure the right version of Compass is being used, but I did spend a long time wondering what I'd done wrong and hacking around until I stumbled on this issue. Note that Sass 3.4.1 seems to work fine. Is there a quick fix to this problem I can patch in? I'd ideally like to use Compass 1.0.1 because of the support for sourcemaps, which are working great and are wonderful.

Edit: I applied MustangGB's patch and installed Zen Grids 2.0.0.beta.2 and the layout issues seem fixed.

davidneedham’s picture

I've been tracking this issue for awhile, but fortunately it hasn't been much of an issue for me. Last night I upgrade my mac to Mavericks, which broke some ruby gems. I reinstalled and ran updates on compass/sass. I noticed the same issue that @charlesroper is reporting in #16.

I tried rolling compass, sass, and everything mentioned by @ckrina in #3 and checking out my theme from a time before the update. Unfortunately whenever compass compiles the scss I still see the issues in #16. Weird, right?

I unfortunately didn't start this theme in 7.x-6.x-dev and the patch from @MustangGB in #4 does not apply. (I tried applying it manually, but naturally some of the files are different and it didn't seem to work.) Next steps I suppose is trying to update my theme using the 7.x-6.x-dev STARTERKIT and apply the patch again.

Any suggestions?

pingers’s picture

Just use bundler. See #15. Easiest way to workaround it.
There's a Gemfile.txt attached to this issue, rename it to just "Gemfile", place in your theme.

If you don't have bundler installed:

$ sudo gem install bundler

Then install the required versions (defined in the Gemfile):

$ sudo bundler update

Then to compile or watch:

$ bundler exec compass compile
$ bundler exec compass watch

Good luck!

ckrina’s picture

@davidneedham maybe you've installed more than one compass versions? I know that sounds too easy, but I had this issue and it took me some time to realize that it'll always use the newer one unless you use bundler as #18 says.
To get a list with all gems you've installed (maybe it's usefull for someone in future):
gem list

davidneedham’s picture

@ckrina You're absolutely correct! Thank you!

And thank you too @pingers (and everyone suggesting bundler)! I followed your steps and all is well.

:Drupal-hug:

echoz’s picture

Status: Needs review » Fixed

Both 7.x-6.x-dev and 7.x-5.x-dev now have their respective Gemfiles, and 7.x-6.x-dev has been updated for the newer Sass and Compass versions.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

kip stanning’s picture

i had three versions of compass installed. i was moved to upgrade compass because of an error message "cannot determine the opposite position to: to" resulting from a change in linear gradient definitions in different versions of compass. thank god i found this thread to get everything running again. (my problem was exactly as described in #15).

kip stanning’s picture

for some reason i subsequently ran into another issue: "file to import not found or unreadable compass/support" ruining the whole css layout and delivering this message on top of each page. resolved the problem by closing all terminal windows and rerunning commands as in #18. "bundler exec compass watch" which had not polled before restarted doing its job.

lukasss’s picture

#15 This works well for me

calbasi’s picture

Version: 7.x-6.x-dev » 7.x-5.5
Status: Closed (fixed) » Active

Hi,
Using your Gemfile (compass < 1.x) source map could not be generated (I think is supported from Compass 1.x).
Nowadays firesass is unmantained and retired from firefox addons and its replacement, firecompass, buggy at new Firefox releases, then, source maps are the only way to debug sass files using Firefox o Chrome inspectors.
So, I think it's not a good solution force compass under 1.x at Zen 5.x
What do you think about?

JohnAlbin’s picture

Version: 7.x-5.5 » 7.x-5.6
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.