Skip to main content

Blog Post

Converting a Drupal 7 Site from Straight Css to Use Node.sass

Or, just adding this setup to your current theme, even if it is Ruby...

Recently I inherited a css-only Drupal 7 project. I thought I would document the steps I went through modernizing it to use a node.sass compiling solution.  If you are interested in an in depth view of adapting the existing css, please head over to Chris D’s blog: Converting a Drupal 7 theme from CSS to Sass.

Current folder structure for regular css based site:

sites/all/themes/custom/client-theme/

  • css/
  • js/
  • Images/

Current folder structure for Ruby based site:

sites/all/themes/custom/client-theme/

  • css/
  • sass/
  • js/
  • images/
  • gemfile
  • .rvm

Step 1: Setting up Node

We would like to use a node.sass based solution to manage our scss => css, and handle some helper tasks.  Our theme needs to use node, and know what version it is expecting.

Because the version of node that we are using on each project can vary we use Node Version Manager (NVM). This allows us to switch between versions and gives us a way to manage this switching easily.

To allow NVM to do this we create a .nvmrc file.  In terminal, and from within our theme folder we are going to run:

`nvm install stable | grep -ohe 'v[0-9]*\.[0-9]*\.[0-9]*' | head -1 > .nvmrc && nvm use`

This is going to add the file for version checking of node. Comma placement - "Once the task is complete, our theme has the nvmrc file and a version inside it. We can run ‘nvm use’ to check we are using the version we just specified.

Party.

Step 2: Getting The Theme Layer Started

The next thing we want to do is install our theme's brain. To do this we are going to add a gulp.js file and a package.json file to the the theme root. These will tell the theme what scripts it has available and add the necessary modules it needs to run those scripts. Use ‘npm install’ to install all project dependencies set in the project’s package.json.

I have two that we made earlier (package.json) (gulp.js), and I am going to drop those in.  I am also going to add a gitignore file, so that our modules are not committed.

Ok.

Step 3: Get the right structure in place

Now we have the ability to run node commands, but we need to adjust our structure for it to make sense.

So we are going to make our theme’s body and install some folders.

(Bump again for Chris D’s blog on converting css to scss.)

First, let's add our sass folder as our watch and compile scripts are looking for this folder (line 22 of the example gulp file provided above). We add this to our theme root.

Now we can add our theme structure inside this new folder.

Here is mine:

  • sites/all/themes/client-theme/
  • sass/
  • Init.scss
  • Site.main.scss
  • Site.no-query.scss
  • Base/
  • Css reset styles here
  • Components/ 
    • ‚ÄčOur site components here eg. header.scss
    •   Layout/
    • Site layout files here eg. l-page.scss
    • Utils/
      •     Variables, breakpoints and other utility styles.

Right now we are good to test our node modules are working correctly.

Note that because the sass is currently outputting as Site.main.css (based on the file name in the sass folder) it will not interfere with the current site styles, as the theme.info isn't looking for that css file.

No errors? Excellent.

Step 4: Follow Up Points

Now we have the basis to start converting the current site styles into  a modern futuristic node driven scss masterpiece. It is at this point you definitely need to check out the previously mentioned blog from Chris D.

If you were updating from Ruby, you might want to remove your Ruby structure. And remember some mixins may be reliant on those gems being installed, so you may have to run a dual setup until you can fully replace them.

References and Links
Gulp
LibSass
GitHub/sass/node-sass
Breakpoint-sass
Topheman.Js
Lightning fast Sass compiling with libsass, Node-sass and Grunt-sass (Super old. But relevant)

Additional Resources
Converting a Drupal 7 Theme from CSS to Sass | Blog Post
Adding custom styles and classes to your WYSIWYG, a 5 minute run down | Blog Post
Pro Tip: How to Write Conditional CSS for IE10 and 11 | Blog Post

Tobias Williams

Meet team member, Tobias Williams

In his role as Front End Engineer at Mediacurrent, Tobias Williams strives to learn something new every day, and keep an open mind to new methods for front-end solutions. He...

Learn more about Tobias >