So... I wanted to use Sassy with Omega. In particular, I wanted to be able to use it with the 4 subtheme css files that integrate with the responsive capaibilities of Omega: global, normal, narrow, and wide.

I copied the css version of those files, replacing the .css endings with .scss. The files had a simple rule h1:after { content: " filename.css"} so I could tell which were active at any given time. I updated the .scss files so their rules said "filename.scss", so I could tell when each one showed up on the page.

I followed the directions to set up Sassy, but it didn't quite work. Here's what worked.

First, I was able to find out what was wrong by checking the status report under admin/reports/status.

That pointed out that phpsass was not properly installed. Turns out I had been a bit too literal and just unpacked the tar file into the sites/all/libraries without renaming the folder to phpsass.

I fixed that and *almost* had it.

In order for the .scss files to be picked up, the normal .css files must *not* be present. I guess that makes sense, but I didn't see it documented anywhere.

Unfortunately, there was also one more problem, which I was NOT able to make go away. Apparently global.scss is not being picked up. *But* global.css got picked up just fine.

Searching through the HTML, the only place "global" shows up is in this script tag (edited to just the global and scss part):

<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"MYTHEME","theme_token":"4VGC2ABooEkLGHyK6-PpKm6OZzZiwGxItjk79GH5bEE","css":{""sites\/all\/themes\/MYTHEME\/css\/global.css":1,"ie::normal::sites\/all\/themes\/MYTHEME\/css\/MYTHEME-alpha-default.scss":1,"ie::normal::sites\/all\/themes\/MYTHEME\/css\/MYTHEME-alpha-default-normal.scss":1,"ie::normal::profiles\/openpublish\/themes\/omega\/alpha\/css\/grid\/alpha_default\/normal\/alpha-default-normal-12.css":1,"narrow::sites\/all\/themes\/MYTHEME\/css\/MYTHEME-alpha-default.scss":1,"narrow::sites\/all\/themes\/MYTHEME\/css\/MYTHEME-alpha-default-narrow.scss":1,"profiles\/openpublish\/themes\/omega\/alpha\/css\/grid\/alpha_default\/narrow\/alpha-default-narrow-12.css":1,"normal::sites\/all\/themes\/MYTHEME\/css\/MYTHEME-alpha-default.scss":1,"normal::sites\/all\/themes\/MYTHEME\/css\/MYTHEME-alpha-default-normal.scss":1,"profiles\/openpublish\/themes\/omega\/alpha\/css\/grid\/alpha_default\/normal\/alpha-default-normal-12.css":1,"wide::sites\/all\/themes\/MYTHEME\/css\/MYTHEME-alpha-default.scss":1,"wide::sites\/all\/themes\/MYTHEME\/css\/MYTHEME-alpha-default-wide.scss":1,"profiles\/openpublish\/themes\/omega\/alpha\/css\/grid\/alpha_default\/wide\/alpha-default-wide-12.css":1}});
//--><!]]>
</script>

So, the "global" is still .css, but you can see the .scss files being picked up for the rest of the media types.

Looks like a bug to me, but otherwise, it seems to be working. I figured I'd be thorough in case it might also help improve the docs (like the bit about making sure phpsass is in a folder called phpsass and that the .css files shouldn't be present).

Comments

richthegeek’s picture

richthegeek commented

Thanks for posting this - definitely seems like a bug. I'll track it down later this afternoon.

Thanks also for noting that you need to rename the folder from GIT. I'm making a presentation and maybe a screencast about Sassy so I'll make sure to clarify the installation process!

JoeAndrieu’s picture

JoeAndrieu commented

Ok. Great. Btw, I just wanted to confirm that MYTHEME-alpha-default.scss is getting picked up just fine. I had missed that in the earlier description.

richthegeek’s picture

richthegeek commented

Hey, I've been a little busy lately so haven't been able to get around to chasing it yet.

I will definitely be looking at it soon - if you want to try tracking it down, try adding print_r($file) in _prepro_compile (in prepro.module) and see if it's actually *trying* to compile the file.

chrisjlee’s picture

chrisjlee commented

Oh i just noticed this pitfall; might be that issue.

One of my sass stylesheet wasn't included sometimes because my subtheme setting had it unchecked.

JoeAndrieu’s picture

JoeAndrieu commented

chrisjlee, that isn't the case for me. the subtheme definitely has it checked. but that was worth checking. thanks.

richthegeek’s picture

richthegeek commented

Ok, I can't reproduce this. My steps:

1. Download omega, copy omega-html5 starterkit to sites/all/themes
2. Alter .info file so it's global.scss instead of global.css
3. Enable the theme + set default
4. Tick the "global.scss" checkbox under "Toggle Styles" pane in the theme settings
5. Stylesheet was imported

Can you mark out where your process differed to cause the error?

albert volkman’s picture

albert volkman commented

I had the same issue and the step I was missing was #4. Works as expected now. Thanks @richthegeek!

richthegeek’s picture

richthegeek commented
Status: Active » Closed (cannot reproduce)

No updates in 2 weeks, marking this as CCR

drupov’s picture

drupov commented
Status: Closed (cannot reproduce) » Active

Can somebody please point me to how to add the narrow, normal, and wide scss files to the omega theme?

#6 works perfect, but how to add those other styles as scss files to the theme?

I already have opened an issue in the omega queue: http://drupal.org/node/1494580

The main problem is that by adding all scss files in the .info files directly their stacking order is being broken, this means that the normal layout stylesheet is being loaded when viewing the site in mobile view too, which is not how omega works by default.

Thanks!

richthegeek’s picture

richthegeek commented
Category: bug » support
fubhy’s picture

fubhy commented
Status: Active » Fixed

#9: You don't need to put them in the .info file. Omega is aware of '.scss' files and will add them. Just delete your normal narrow and wide (or whatever) .css files and replace them with .scss files. Omega will pick them up after a cache clear.

Status: Fixed » Closed (fixed)

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

drupsup’s picture

drupsup commented
Status: Closed (fixed) » Active

I've read this, and other posts in other threads, multiple times, and can't seem to get this to work.

To clarify a couple of points,

Is this

2. Alter .info file so it's global.scss instead of global.css

intended to be this

...
css[global.scss][name] = 'my styles'
css[global.scss][description] = 'CSS stylesheet for my net'
css[global.scss][options][weight] = '10'
...
settings[alpha_css][global.scss] = 'global.scss'
...

?

I've been so far unable to get this
4. Tick the "global.scss" checkbox under "Toggle Styles" pane in the theme settings

to appear. It's only displayed as 'global.css'. I supsect it'll depend on the prior answer.

I'm not sure which "them" this
You don't need to put them in the .info file. Omega is aware of '.scss' files and will add them. Just delete your normal narrow and wide (or whatever) .css files and replace them with .scss files. Omega will pick them up after a cache clear.

refers to.

I e.g. have 

global.css
my-alpha-default.css
   |-- @import url("style1.css");
   |-- @import url("style2.css");
my-alpha-default-narrow.css
my-alpha-default-normal.css
my-alpha-default-wide.css

Which of those need to be renamed to *.scss? All of them? Just global.scss?
And, which need to be referenced in .info? None? Just global.scss?

llovelett’s picture

llovelett commented

I am also still having trouble getting all of this to work.

I have global.css.scss working great after adding:

css[global.css.scss][name] = My Project styles
css[global.css.scss][description] = SCSS stylesheet for My Project.
css[global.css.scss][options][weight] = 10
settings[alpha_css][global.css.scss] = 'global.css.scss'

to my .info file. I then cleared cache and checked the box next to global.css.scss in the subtheme settings (same process as outlined in #6).

Now I am stuck on narrow, normal, wide, and default. When these 4 stylesheets are .css they work perfect. When I change them to .scss and clear the cache, they are not working.

Is there some way I need to tell Omega how to look for .scss instead of .css?

Thanks for the help.

drupsup’s picture

drupsup commented

Same story here.

Your .info mod

I have global.css.scss working great after adding:...

works perfectly for global.css.scss.

But, no changes to any of the *-width-*.css as either .scss or .css.scss are picked up.

update:

Searching on similar symptoms, I came across this:

Drupal, Omega and Compass

Omega uses media queries to include multiple CSS files. Which means: once aggregation is turned on, all files are combined. At this point, prepro doesn't get any chance to compile it seems.

Trying to determine now if that's at play here ...

fubhy's comments elsewhere in this issue queue suggest that this is supposed to work for Omega. I've not yet managed to find a detailed, working, step-by-step that shows that to be true.

hkirsman’s picture

hkirsman commented

Tried #11 but global.sass was still not compiled.

hkirsman’s picture

hkirsman commented

Okay, now global.scss is included and works even with aggregate.

Changed 3 lines in info file

css[global.scss][name] = 'Your custom global styles'
css[global.scss][description] = 'This file holds all the globally active custom CSS of your theme.'
css[global.scss][options][weight] = '10'

Maby saving form under appearance helps if this is not enough?

richthegeek’s picture

richthegeek commented
Status: Active » Postponed (maintainer needs more info)

Is there any news on this? As far as I can tell, the issue is with either Prepro or Omega

drupsup’s picture

drupsup commented

"Maintainer needs more info" ... from whom?

Iiuc, the answer would likely lie with fubhy, who's a maintainer _here_ and @ Omega.

richthegeek’s picture

richthegeek commented

From anyone really - this issue isn't with Sassy but I don't know if it's to do with Prepro (not picking files correctly) or Omega doing something funky with files.

Some resolution on this would be v handy

drupsup’s picture

drupsup commented
Status: Postponed (maintainer needs more info) » Active

I just got emailed on this -- apparently fuhby's commented in #irc something to the effect of:

Omega3's code's broken re: the order it picks files in
It's fixed in Omega4 and won't be backported to Omega3
this module, 'Sassy', is 'just for play'; you should just use the ruby-based service instead
there's no documentation of how to do this specifically with Omega, just use the Compass docs and figure it out

Don't know if that qualifies as "some resolution", but sure sounds to me like a WONTFIX.

fubhy’s picture

fubhy commented

Omega 3 tries to load the .css file first, if it is not there it checks for alternatives (.scss, etc.). The code for that is not 'broken' but should not be there at all. I regret now that I put that kind of 'magic' in there. It shouldn't be there. That (and maybe something else) is the reason why you guys are having these issues in conjunction with SASSY. However, fixing this in 3.x would break existing sites. That means: Either use the standard ruby compiler to pre-compile your CSS or wait for Omega 4.x (which fixes this problem). Oh, and... I didn't say that SASSY 'is just for play'. I said that 'if you are having troubles with SASSY, just use the ruby compiler.'

drupsup’s picture

drupsup commented

> I didn't say that SASSY 'is just for play'. I said that 'if you are having troubles with SASSY, just use the ruby compiler.'

Since you're protesting, here's what was sent to me in the email:

[Tuesday, September 18, 2012] [10:07:25 AM] srjosh, pgnd I am a maintainer of Sassy and I always recommend using the native ruby based compiler
[Tuesday, September 18, 2012] [10:07:43 AM] Sassy is a playground and a possible fallback
[Tuesday, September 18, 2012] [10:08:01 AM] but if you are having troubles with sassy you should try the normal ruby compiler

Parse it whichever way works best for you ...

For me, all that matters is WONTFIX this bug.

fubhy’s picture

fubhy commented

Yes... The essence of this is: Use whatever parsing solution works for you.

l.damen’s picture

l.damen commented

As easy as is, just a small hack of 1 line.
Add 1 rule to your .info file at the bottom:

stylesheets[all][] = css/global.scss

Clear the cache, resave your prepro and omega 3 is rendering because it's not using the theme settings, but the direct file.

l.damen’s picture

l.damen commented
Issue summary: View changes

cleared out erroneous "default" filename