You are here

Using Sass with Drupal themes

I'm sure you already know Sass is the new way to do Css.  Forget about having to remember that your theme's borders are all #7f7f7f and typing that over and over in your different stylesheets.  Use variables like you do in all your other programming languages and call it $medium-grey or $border-color.  That way if you want to change that color later, you can just do it in one spot.  Anyway, that and nesting and mixins and selector inheritance should be reason enough to have you convinced.

And - setting up your Sass environment and making the move is not painful at all.  Here is how you can get setup to use Sass with a sass-ready drupal theme.  Here's how to do it on a Windows machine:

Using Sass with the command prompt

  1. Get the ruby installer from here (get the latest version) and run through default install options, except one
    • I noticed on the last screen, that the box to 'Add Ruby executables to your PATH' was unchecked by default.  Make sure to check that before completing the install!  That way it'll be all ready to use from the command prompt.
  2. Run the command prompt (type in 'cmd' in your computer searchbox)
  3. Type 'gem install sass' as the command
    • It should respond with '1 gem installed'
  4. You're all setup and can now edit sass stylesheets and have sass compile them into regular css stylesheets for you!  Here is a tutorial on getting you started using sass through the command-line.
    The basic command you will be something like

    sass --watch [sass_files_input_folder]:[css_files_output_folder]

    or something like this in practice
     

    sass --watch stylesheets/sass:stylesheets/compiled

 

Using Sass with a GUI

I always prefer to do things through a graphical user interface, rather than the command prompt (except Git, that is), so here is how you can setup Scout and use it for watching your sass files.  Let's use a Drupal theme example!

  1. Download Scout (this is available for both Windows and Mac)
  2. When you first launch Scout, it will look like this - super bare.  You'll think you've done something wrong!  But it's only because you haven't added any projects to it yet.  Wait until step #7, and it'll look a little more useful!
  3. Get a sass-ready Drupal theme to practice on.  One I've been using recently is the 4.x version of Omega.  Just make sure you get the correct version.  The 4.x is still in the dev section:
  4. Follow the omega 4.x instructions on creating a sub-theme: http://drupal.org/node/1936948.  It's basically a single command to run (must have drush installed) with a couple of optional flags
    ~/sites/all/themes/omega: drush omega-subtheme “My Sub-Subtheme” --basetheme=”my_subtheme” --set-default

    Choose the human-readable name of your theme, as well as the computer name (where 'my_subtheme' is above).  You can also use the --set-default flag, optionally, if you want this command to immediately set this as the default theme for you to checkout.

  5. The command above creates the omega subtheme in the sites/all/themes folder, with the human and computer names placed in all the right spots, so you don't have to go editing the .info file and the template.php file copying and pasting your theme name in there!  Great, so let's open up this new subtheme from the sites/all/themes folder and check out the sass files it has included!
  6. Here is the structure of Omega-4.x's files.  Let's not forget we will only modify the sass files, which will later get recompiled into regular css files the browsers can use:
  7. Before we start making changes to the sass (.scss) files, let's ask our Scout application to watch for changes and do the compiling into css for us.  Open up Scout, and click on the '+' button at the bottom to add your new sub-theme as a project (you may not have any projects yet, so don't worry if yours is all blank):

    Select your sub-theme's root directory upon the prompt to find the project, and then configure the project in scout.  The only mandatory folders to specify are the 'Input Folder' and 'Output Folder'.  These should be the sass/ and css/ directories, respectively.  Remember, Scout will be watching your sass files (input) and compiling these into the single, large styles.css file in the css directory (output).

    Feel free to select your theme's js and image directories too

    There's no save button, it will just remember your settings. ;-)

  8. Now that the project, with its input/output folders is setup, whenever you want to start modifying the sass files, you simply need to tell Scout to start 'watching' for changes, just like you'd be doing in the command prompt.  To do this, just press the 'play' button next to the projects you're currently working on, and Scout will switch to the 'Log' screen for you and start watching and compiling.  You can be watching the input/sass directories of multiple projects at the same time!

    As soon as you hit 'play' on a project, Scout outputs "Compass is polling for changes. Press Ctrl-C to Stop." in the log.... That's how you know it's working!
     

  9. To test all this out, let's now go into our _base.scss file and add a variable and define the styles for a couple of default HTML elements (that's what typicall goes in the _base.scss file)
    $font-color: #4a4b48;
    $link-color: #c77500;
    
    html {
      color: $font-color;
    }
    
    body {
      font-family: Enriqueta,georgia,serif;
      line-height: 1.4;
    }
    
    /* Links */
    a {
      color: $link-color;
    }

    Save the _base.scss file with the changes above!

  10. Now go back to your Scout app, which should be running, and see the log output.  It should say "Change detected at <timestamp> to: _base.scss"!  So it knew you've modified the file, since it's been watching and has now recompiled all changes into the styles.css file that is its output.  If you have your sub-theme set as the default theme on your site, you should be able to refresh the necessary page too see your changes immediately.  Just know that Scout needs to be set to watch your project, or you need to do that by hand in the command prompt to be able to work with sass stylesheets -> they need to get compiled into regular .css files first before the browser can use them!
    • An obvious corollary is that you should never edit your styles.css file directly (or any css files in a sass theme).  If the changes are not made in the source/input sass files, they will just get overwritten next time the sass files are compiled!

 

So Voilà!  There it is. Easy, right?  So go ahead and make the move to sass in your Drupal themes and let us know how much you love it in your comments below.

 

Share

Comments

Hey Boriana,

When I hit plus to add a first project to Scout it offers to browse my desktop - but what if my website is on a remote server rather than on my desktop?

Thanks...

Hmmm, any way I can talk you into doing your theming locally first (hopefully even using source control) rather than theming directly on the server?  That'd be the best!

I know that totally doesn't answer your question, but I think the Scout app is meant to be used locally, and that's how I always use it.  :-)

 

OK I use http://www.aegirproject.org/ which is kind of version control on the server so I will have to think how the local thing would work.

If you need a suggestion for a blog article can I request something like how to recreate an existing Omega 3 theme in Omega 4. But anyway thanks for your cool blog :)

After many days trying as a beginner to get sass working in drupal ATSUBTHEME i arrived with this post using Scout! You saved my day! Susanne

I'm so glad this was helpful!

i have problems with scout .
LoadError on line 1038 of org/jruby/RubyKernel.java: no such file to load -- compass-normalize.
anyone an idea to solve the problem ?
win 7 system

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.