Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
I am trying to workout with SASS for that i have installed the Sassy, Prepro, and Libraries and added the PHPSass from the https://github.com/richthegeek/phpsass/zipball/master. i have enabled the modules and cleared the cache too.
Now are the other steps that i need to follow. When I tried to make the changes in the "sass/_custom.scss" file from my sub-theme folder there is no changes in the site.
Comments
Comment #1
Jeff Burnz CreditAttribution: Jeff Burnz commentedActually 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.
Comment #2
Jeff Burnz CreditAttribution: Jeff Burnz commentedOh, 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.
Comment #3
Cyclodex CreditAttribution: Cyclodex commentedI 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!
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
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.
stylesheets[screen][]
so it would not be loaded by this basic implementation.Would be great to get this running, but I also think of just using the compass-in-console thing.
Comment #4
Jeff Burnz CreditAttribution: Jeff Burnz commentedThose 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.