When using a module like sassy, what is the correct way to "overwrite" the css files that hold the styles for the different layouts:

global.css
YOURTHEME-alpha-default.css
YOURTHEME-alpha-default-narrow.css
YOURTHEME-alpha-default-normal.css
YOURTHEME-alpha-default-wide.css

How do you declare the new scss files in your .info file so that they are used instead of the css-ones? What is the correct way of doing this?

Thanks!

Comments

drew reece’s picture

If SASS is anything like .less you just add a folder to contain the .less/ .scss version of the files you mentioned & then setup the processor to copy from one folder to the other.

You could use the Drupal SASS / SCSS module if you want the processing to css to happen server side. Personally I'm happy to work locally & compile the .less to .css & use that within the theme. It means you don't need to alter the theme in anyway. And if you move to another server it doesn't require a pre-processor.

drupov’s picture

drew reece, thanks for your reply!

Sassy and the PHPSass preprocessor are installed and the files are declared in the .info files as follows:

libraries[sassy][name] = Sassy
libraries[sassy][description] = Lorem
libraries[sassy][css][0][file] = global.scss
libraries[sassy][css][0][options][weight] = 10
libraries[sassy][css][1][file] = YOURTHEME-alpha-default.scss
libraries[sassy][css][1][options][weight] = 10
libraries[sassy][css][2][file] = YOURTHEME-alpha-default-narrow.scss
libraries[sassy][css][2][options][weight] = 10
libraries[sassy][css][3][file] = YOURTHEME-alpha-default-normal.scss
libraries[sassy][css][3][options][weight] = 10

The Sassy library is enabled and the files are being recognized and processed by the Sassy module.

If SASS is anything like .less you just add a folder to contain the .less/ .scss version of the files you mentioned & then setup the processor to copy from one folder to the other.

The processor is setup to copy the files to the css folder of the theme and this functions.

However the stacking order of the files is being ignored, this means the styles in the alpha-normal stylesheet are still valid and overwrite those in the global stylesheet when you view the site in mobile mode.

drew reece’s picture

Does changing the weight's make any difference ?

drupov’s picture

No, it does change the order but all stylesheets are still being loaded together, so styles for the normal layout apply downwards for the narrow or the default or the global view/stylesheets.

I also found out that the .css files are found even if the preprocessor is configured to put the them in the public directory (by default the cache location of the prepro module is "public://prepro/", which is actually ok, because of write permission issues with the theme folder, which is in "sites/all".

Anyway the "default"-files apply also in mobile view (where only the global stylesheet should appear). If you look at your site in Firebug in mobile view and when no Sassy is installed, you see that the "normal" stylesheet is not being loaded at all. Somewhere during the preprocess process the javascript functionality is being set off.

Probably I am totally on the wrong track by declaring the files this way in the .info file.

Any help is still very much appreciated!

drew reece’s picture

Thinking more about it …
The narrow, normal & other css files should be included via the media query settings in the theme settings. If they are added in the info file they will be added to the css array for Drupal to include in the head.

It sounds like sassy needs another way to know about those stylesheets.
If sassy can use a cron job or have a watch folder it may be a way to get it to process the files & update the .css that is handled in the .info & Omega media queries.
Are you doing dynamic things in the css on the server? Would a scheduled parsing job be enough?

Have you checked Sassy's issue queue? Omega gets a mention…
http://drupal.org/project/issues/search/sassy?text=omega&assigned=&submi...

drupov’s picture

Status: Active » Fixed

the correct way to do this can be found here: http://drupal.org/node/1457380#comment-5841232 thanks to @fubhy!

Thanks @drew_reece for your support here too!

Status: Fixed » Closed (fixed)

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