fromJune 2014
Column:

The Angry Themer

Using Sass to Conquer CSS
0

Row of seedsSometimes CSS feels like it stands for “Complete Sh*t Show.”

Lucky for us, there’s a tool to help get our CSS under control. This tool is Sass; Simply Awesome Style Sheets. Well, actually: Syntactically Awesome Stylesheets.

Sass is a preprocessor for CSS. Just like PHP & Drupal create Drupal’s Very Rich and Enhanced Markup™, Sass does the same for CSS, but properly, by taking your .scss (sass) files and turning them into super .css files, with variables, functions, and other fancy powers.

.sass files -> [magic thingie] -> .css

Install Sass

Installing Sass on your machine is straightforward, if you’re not afraid of the terminal. Simply do a "sudo gem install sass".

Boom.

You’re ready to get Sassy.

But if the terminal gives you agita, you can install Sass with a GUI, a complete list can be found on sass-lang.com/install or LiveReload.com.

Here’s a video showing how this process works: http://wdog.it/4/1/video

Setup your Drupal theme

How Sass works with multiple files
In order to make Sass work in your theme, you need:

  • a Ruby config.rb file, for configuration;
  • a Sass folder for all your Sass files;
  • a CSS folder where all your compiled CSS files will be created.

Say Good-bye to Your CSS Files

First, accept that once you convert your CSS files to Sass, you will never again have to look into the CSS folder.

Your days of fiddling directly with CSS are over, and everything is gonna be OK.

Setup the Sass File Structure

Screen Cap
One of the cool things about Sass is being able to split up all your files and let the preprocessor do the heavy lifting. Sass collates all your files into one minified and ready-to-go file, which grants you a bit of sanity inside the [themename].info file.

Instead of creating each of your Sass files (fx foo.scss) to become a .css file (foo.css), add a "_" to the files you don't want to have rendered fx: _menu.scss, _blocks.scss,
and add the partials to your main theme Sass file (theme_name.scss).

Theme Structure

The theme structure can be found here http://wdog.it/4/1/mdk.

Drupal has a tendency to add at least one CSS file per module, which can be a PITA. Attack that the Angry Themer™ way; put the css files into your theme and let Sass take care of it.

By following a combination of sensible file organizing – and competently navigating Drupalisms (i.e., all the dumb rigmarole you have to account for in Drupal that doesn’t happen anywhere else) – you can structure the sass so that you can easily find them again.

Sass folder:

 
/sass/base/
  _base.scss
  _image.scss
...
/sass/drupal/
 _forms.scss
 _forms-login.scss
...
/sass/layout/
 _grid.scss
 _page-layout.scss
...
/sass/design/
 _colors.scss
 _typography.scss
 -fancy.scss
...
/sass/style.scss
buttermuffin.scss

Inside the main sass file for your theme, import all the files you need:

@import "drupal/forms"
@import "drupal/forms-login"

That is the file that will be finally rendered (remember the underscore trick) into style.css.

As the next step we add the style.css file to the theme's info file:

buttermuffin.info
....
 
;-------------- C S S -------------
stylesheets[all][] = css/buttermuffun.css
stylesheets[all][] = dragons.css

In the .info file, we point the theme to the compiled .css file.

Now that I have ranted about the awesomeness of Sass, you might ask: What is that dragons.css file doing there in my theme?

Here’s why: I use the dragons.css for my cute developers – who shouldn’t be meddling with my Sass files – or for when I need a quick ‘n’ dirty fix on a live server. Use the dragons.css file to add stuff in without having to re-roll the sass to css files.

Conquer

Advertisement

From our blog

Entity Storage, the Drupal 8 Way

In Drupal 7 the Field API introduced the concept of swappable field storage.

The Drupal 6 to 8 Upgrade Challenge - Part 2

Having concluded the readiness assessment, we turn next to migrating the content and configuration. In reality, there’s little chance that we would migrate anything but the blogs from our old site. For the sake of giving Migrate in Core a workout with real conditions, however, we’re going to upgrade with core’s Migrate Drupal module rather than rebuilding.

The Drupal 6 to 8 Upgrade Challenge - Part 1

Nathaniel Catchpole , the Drupal 8 release maintainer and Tag1 Senior Performance Engineer, suggested that Drupal shops everywhere could support the

DrupalCon Austin

The entertainment industry is not for the faint of heart.

Drupal Watchdog Joins the Linux New Media Family
Drupal Watchdog 6.01 is the first issue published by Linux New Media.

Drupal Watchdog 6.01 is the first issue published by Linux New Media. Come see the Drupal Watchdog team at DrupalCon 2016!

Drupal Watchdog was founded in 2011 by Tag1 Consulting as a resource for the Drupal community to share news and information. Now in its sixth year, Drupal Watchdog is ready to expand to meet the needs of this growing community.

Drupal Watchdog will now be published by Linux New Media, aptly described as the Pulse of Open Source.

Welcome to DrupalCon Barcelona - The Director's Cut

For all you schedule-challenged CEOs – and ADHD coders – this Abbreviated Official Director’s Cut is just what the doctor ordered.

Welcome to DrupalCon - The Barcelona Edition

Did we have fun in Barcelona?
OMG, yes!

Did we eat all the tapas on the menu and wash them down with pitchers of sangria?
Yes indeed!

Recursive Closures and How to Get Rid of Them

This came up while manipulating taxonomy children and their children recursively, so it’s as not far from Drupal as you’d think.