SASS implementation

Actually I have no idea - I spent quite some time trying to get these PHP SASS preprocessors working and they never did do a great job (I never really got them to run), take a bit of advice and install Ruby and use Compass. It takes a few minutes and you never have to think about these modules again. This is all absurdly easy if you are using OS X and very strait forward if using Windows.

Basically do the first two steps here: http://www.impressivewebs.com/sass-on-windows/

Then "gem install compass"

Then navigate via command line to your theme root and type "compass watch"

Done.

Oh, even better guide: http://thesassway.com/beginner/getting-started-with-sass-and-compass

Remember, AT sub-theme come with a config.rb file already setup, you never need to create this, you can and should edit it at some stage, to shift from development and production mode.

And use FireSass for Firefox - will show the line numbers correctly in the SCSS files when you use Firebug.

I am also trying out to get this sass files running with the sassy module.

What I see is, you have to enable the scss files in your theme to get them loaded, then sassy/prepro will take over and create the css file under public://prepro, which doesn't really help us because of special handling of media queries which are not included in these files...

So this works already fine with the global files AND the custom responsive!

• sass/global.base.scss
• sass/global.styles.scss
• sass/responsive.custom.scss

But the responsive stuff doesn't work, so I added all of them, but this will create separate css files still without any media queries in

  ; We need to load all the scss files
  ; Be sure that your prepro is configured to save the css files under sites/all/themes/YOURTHEME/css/
  ; Your css files will be overriden!
  stylesheets[screen][] = sass/global.base.scss
  stylesheets[screen][] = sass/global.styles.scss
  stylesheets[screen][] = sass/responsive.custom.scss
  ; the following do not work, because they have no media query in and are always loaded:
  stylesheets[screen][] = sass/responsive.desktop.scss
  stylesheets[screen][] = sass/responsive.smartphone.landscape.scss
  stylesheets[screen][] = sass/responsive.smartphone.portrait.scss
  stylesheets[screen][] = sass/responsive.tablet.landscape.scss
  stylesheets[screen][] = sass/responsive.tablet.portrait.scss

With this setup (and be sure you changed the prepro save path to sites/all/themes/YOURTHEME/css/) it will generate all the css files, but unfortunately loads them also directly without any mediaqueries in.

I think here is the issue we have to solve.

• A : Do not allow them to be loaded directly, only create the css files
• B : Tell the prepro thing, that it should load and generate the files, without adding the files to stylesheets[screen][] so it would not be loaded by this basic implementation.
• other ideas?

Would be great to get this running, but I also think of just using the compass-in-console thing.

Those files do not have media queries in them to start with, they load in link elements with the media query applied to the link, for example like this:

<link type="text/css" rel="stylesheet" href="http://at7dev:8888/sites/all/themes/adaptivetheme/at_subtheme/css/responsive.smartphone.portrait.css?mivs7h" media="only screen and (max-width:320px)" />

Its only after you turn on CSS aggregation that AT will load a different responsive sytlesheet with all 5 of those files aggregated and embedded in respective media queries - this is called something like adaptivetheme_subtheme.responsive.styles.css

It does this to save HTTP requests, yet allow the system to work with media queries set in theme settings.

This is also why you must save the theme settings right before you go live (and before you turn on CSS aggregation), so all files are newly generated and up to date.

If Prepro or any other modules is trying to take over loading of files, then this won't work.

I highly recommend simply working with Ruby and Compass, the command line stuff is trivial, and really if you want to work with Drupal a lot you should use command line, for example Drush is an amazing tool for all Drupal developers - really all quite easy if using OSX, not that hard if using Windows.