Relax. Dont fret over taking notes.

Download the presentation slides here:

http://j.mp/drupal-compass

Note: Its okay if you read ahead. We dont mind. :)

Design & User Experience

Using Sass & Compass in Drupal Theming

Nathan Smith & Matt Farina

Hello :)
We like Drupal, Sass & Compass. We hope you do too, or will soon.

Let us introduce ourselves...

Nathan Smith is a UX designer at

http://projekt202.com yay, books!

Matt Farina is a web developer at HP Cloud Services

http://hpcloud.com

Note: We co-authored these books, respectively. Were not taking all the credit.

Sass & Compass are made possible by...

Hampton Catlin created Haml & Sass

Nathan Weizenbaum Google Chrome (Dart)

Chris Eppstein created Compass

http://hamptoncatlin.com

http://nex-3.com

http://chriseppstein.github.com

He is no longer active in working on Sass.

Still works on Sass, in his 20% time.

Also, member of Sass core team.

...and other community contributors.

So, that just happened:

(anyways...)

Part 1: Why Sass?

On -webkit vendor prefix drama

The backdrop to this debate is that CSS is absolutely the worst, least productive part of the web platform. Apps teams at Google are fond of citing the meme that CSS is good for documents, but not for apps. I push back on this, noting the myriad of ways in which CSS is abysmal for documents [as well]. Alex Russell @slightlylate
Google Chrome team / Dojo Toolkit co-creator

http://infrequently.org/2012/02/misdirection

So whats to be done about CSS?

The answer has actually been staring us in the face for awhile now, but its only been in recent years that CSS has become a first-class citizen. CSS is now being approached with an architectural mindset. PHP is a (recursive) acronym for PHP: Hypertext Preprocessor. So, preprocessing is a considered a Good Thing for HTML. How does it work for CSS?

Neatly organized *.sass

CSS served to browser

http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli

Years ago, we wrote static HTML. Now, we almost never do. Our HTML is virtually always preprocessed, be it by PHP, Python, Ruby, Perl, .NET, Java, or something else. Today, we almost never write and serve straight HTML. Jeff Croft @jcroft
Chief Designerd at nGen Works

http://jeffcroft.com/blog/2012/jan/31/on-css-preprocessors

Noteworthy CSS preprocessors

LESS
http://lesscss.org

Sass & Compass

http://sass-lang.com http://compass-style.org

Stylus & Nib

http://learnboost.github.com/stylus http://visionmedia.github.com/nib

Note: Obviously, today we will only be covering Sass and Compass.

CSS

Sass
http://sonspring.com/journal/sass-for-designers

Compass

Compass is essentially Sass extra-awesome secret-sauce.

Compass extends the functionality of Sass by offering a plugin architecture. It also handles vendor prefixes like a champ. Today, when you hear us say Sass, we may blur the lines between Compass and Sass. Hope thats okay.

Oversimplification, FTW!

Compass is to Sass as jQuery is to JavaScript

Sass & SCSS are functionally equivalent

We prefer using Sass instead of SCSS because hey, less typing!

Anti-pattern of nested selectors in Sass

Compass makes vendor prefixes easy...

Compass brings sanity to gradients...

Text editors and IDEs that support Sass/SCSS syntax

Aptana
http://aptana.org

BBEdit
http://barebones.com/bbedit

Chocolat
http://chocolatapp.com

Coda
http://panic.com/coda

E Text Editor
http://e-texteditor.com

Eclipse
http://eclipse.org

Emacs
http://gnu.org/software/emacs

Espresso
http://macrabbit.com/espresso

GEdit
http://projects.gnome.org/gedit

Komodo
http://activestate.com/komodo-ide

Netbeans
http://netbeans.org

PhpStorm
http://jetbrains.com/phpstorm

PyCharm
http://jetbrains.com/pycharm

RubyMine
http://jetbrains.com/ruby

SubEthaEdit
http://codingmonkeys.de/subethaedit

Sublime Text
http://sublimetext.com/dev

TextMate
http://macromates.com

Vim
http://vim.org

Visual Studio
http://microsoft.com/visualstudio

d We recommen

http://sass-lang.com/editors.html

GUI to compile Sass & Compass

Compass.app
http://compass.handlino.com

Scout
http://mhs.github.com/scout-app

CodeKit
http://incident57.com/codekit Note: Personally, we prefer to run command-line compass watch

Impression of Sass...
Great for CSS, in Ruby on Rails projects.

Impression of Sass...
Great for CSS, in Ruby on Rails projects. Great for CSS, in Ruby projects.

Impression of Sass...
Great for CSS, in Ruby on Rails projects. Great for CSS, in Ruby projects.

Great for CSS, in any project!

But, wait...
What if I want to use Sass for something that wasnt written in Ruby... impossible?

When I think about not having Sass...

http://en.wikipedia.org/wiki/The_Incredible_Hulk_(TV_series)

So, does Sass require Ruby?

Yes, but the amount of Ruby knowledge it takes to use Sass is basically zero. Nathan is not a hardcore programmer, but he manages to use Sass just fine. Matt explained to Nathan how to use *.sass files in Drupal. Matt is the man.

Part 2: Whither a module?

Why use a Drupal Module?

Possibly Bad Reasons... You dont want to install Sass/Compass gems. You want Drupal to do everything, end-to-end. Possibly Good Reasons... To use base-theme mixins/variables in sub-theme. So that modules can supply mixins/variables.

Sass/SCSS module
http://drupal.org/project/sass

Depends on phamlp
http://code.google.com/p/phamlp Last updated in September 2010.

PHP needs code write access to theme

This can lead to bad security practices.

Despite the name, only handles SCSS files

#sadpanda

Compass stylesheet tool module

http://drupal.org/project/compass

Ruby (Compass) does the heavy lifting

This means you need Ruby and PHP on your server.

Can compile CSS using devel or cron

This is similar to compass compile but using Drupal.

Compass location across environments

Compass location set it config. Needs to be managed.

Version and permissions can be an issue Module admin page is hidden (a bug)

Sassy module
http://drupal.org/project/sassy

Several dependencies
http://github.com/richthegeek/phpsass and three other modules.

Hooks for namespaces/implementations

Incomplete (PHP) implementation of Compass, Bootstrap, Foundation.

Sass & SCSS files in .info file styles[] Stores generated files in public files

Best tool for the job

Jeff Croft, quoted previously, programs in Python and uses Django. He also makes use of Sass, via Ruby. We advocate trying to move beyond a not invented here mindset, and adopting a more hybrid workflow. Just as it wouldnt make much sense to port Drupal out of PHP, we think its most logical to use first-party releases of Sass and Compass directly, if possible.
TL;DR Stick close to the metal if you want to stay on the cutting-edge.

ACHIEVEMENT UNLOCKED! Presuppositions Challenged

Note: I dont think this photo is necessarily relevant, but I think we can all agree that raw electricity looks awesome.
https://en.wikipedia.org/wiki/The_Prestige_(film)

Part 3: How to use

Prerequisite: Ruby
For the sake of brevity, we are going to assume in this talk that your environment already has Ruby set up. If not, then follow the instructions here... http://sonspring.com/journal/sass-for-designers

Setting up Compass & Sass

From the command-line (Terminal.app, iTerm, etc)...

gem install compass

This will also automatically download the Sass gem, a dependency of Compass. Theres no need to install separately. Theyre typically used in tandem anyway.

Take a hybrid PHP + Ruby approach

Add config.rb to your theme directory

cd to your theme directory, then run compass watch

If you just want to flush cache and compile, run compass clean && compass compile

application.css is compiled and (optionally) minified via compass watch

Serving as a aggregate, application.sass is built from _file.sass partials. I bring over what I do like from default Drupal CSS as SCSS files, to import: _search.scss _system.base.scss _system.theme.scss Compass outputs the resulting compiled file as application.css

Sass partials begin with an underscore, arent compiled to *.css files individually.

Theme *.info file before Sass

stylesheets[all][] = assets/css/reset.css stylesheets[all][] = assets/css/override/system.base.css stylesheets[all][] = assets/css/override/system.theme.css stylesheets[all][] = assets/css/override/search.css stylesheets[all][] = assets/css/960_12_col.css stylesheets[all][] = assets/css/text.css stylesheets[all][] = assets/css/formalize.css stylesheets[all][] = assets/css/site.css ; KILL THESE DEFAULT STYLESHEETS: stylesheets[all][] = ctools.css stylesheets[all][] = field.css stylesheets[all][] = node.css stylesheets[all][] = system.messages.css stylesheets[all][] = system.menus.css stylesheets[all][] = user.css stylesheets[all][] = views.css Files in orange are listed to prevent Drupal from adding em automatically.

For brevity, only CSS files shown

Theme *.info file before Sass

Minus the nonexistent files, to ward off Drupal defaults...

stylesheets[all][] = assets/css/reset.css stylesheets[all][] = assets/css/override/system.base.css stylesheets[all][] = assets/css/override/system.theme.css stylesheets[all][] = assets/css/override/search.css stylesheets[all][] = assets/css/960_12_col.css stylesheets[all][] = assets/css/text.css stylesheets[all][] = assets/css/formalize.css stylesheets[all][] = assets/css/site.css

This compresses down to a single CSS file, in the Performance cache setting in Drupal.

For brevity, only CSS files shown

Theme *.info file after Sass

stylesheets[all][] = assets/css/application.css ; KILL THESE DEFAULT STYLESHEETS: stylesheets[all][] = ctools.css stylesheets[all][] = field.css stylesheets[all][] = node.css stylesheets[all][] = search.css stylesheets[all][] = system.base.css stylesheets[all][] = system.theme.css stylesheets[all][] = system.menus.css stylesheets[all][] = system.messages.css stylesheets[all][] = user.css stylesheets[all][] = views.css
Files in orange are listed to prevent Drupal from adding em automatically.

For brevity, only CSS files shown

Theme *.info file after Sass

Minus the nonexistent files, to ward off Drupal defaults...

stylesheets[all][] = assets/css/application.css

ACHIEVEMENT UNLOCKED Only one CSS HTTP request! With (or without) cached CSS compression in Performance.

This is still worth doing. Ill explain why in a second.

Even if using compass watch with: output_style = :compressed You should still use Drupals CSS compression under Performance. Why? Well, lets flip to the next slide...

Benefits of using Drupals CSS compression, not just Compass:

1. Cache-busting. File name is changed to...
css_VvtjvgJd9tI4sfrbHdy7Yvyc5fm9jVFoHRnrEBsJlQs.css

2. <link /> instead of <style>@import</style> (older IE versions are slower at the latter) 3. Drupal replaces url(../images/file.png) with url(/full/path/to/images/file.png) Useful if you have assets on a CDN or subdomain.

Compass output, before Drupal compression

Compass output, after Drupal compression

Achievement Unlocked!
You have now attained CSS bliss.
Dont forget to rate this as the best talk youve ever heard in your life. Or, maybe we forgot something...

Stop the presses!

What about debugging? How do I see what styles are coming from which *_file.sass partial?

Part 4: Debugging & Demos

Cryptic error messages are never helpful.

^ I believe debugging this way stinks.

When things dont go as planned...

http://autos.yahoo.com/blogs/motoramic/porsche-stuck-wet-cement-proves-karma-exists-210302568.html

Just a one-line change in config.rb

Emits *.sass stack trace for each style

A quick tip on source control

While you can track your *.css files via source control, the ones you really care about are your *.sass files, which are the canonical source of truth. Educate peer developers not to edit *.css, but instead tweak *.sass files when making changes.

Now time for some demonstrations :)

Note: If youre viewing these slides, but missed our session, we showed compass watch in action.

Luck, be a lady... (live demo = dice roll)

http://kloucksphoto.blogspot.com/2011/06/guys-and-dolls-witty-wry-wonderful.html

If you want to tinker with Haml & Sass...

(Nicole helped make Yahoo & Facebook more efficient) We keep thinking we can write better CSS if we just try harder, that the next site will be clean and stay that way. [Her] presentation shows that in fact, messy CSS is the direct result of our worst best-practices. We need to re-examine those assumptions with an eye to practicality and scalability as well as accessibility, standards, and fabulous design. Nicole Sullivan @stubbornella
CSS Ninja & Front-end Performance Engineer

http://stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us

Thanks for coming. Keep in touch!

http://twitter.com/NathanSmith
Personal site http://sonspring.com

http://twitter.com/MattFarina
Personal site http://mattfarina.com

Feel free to say hi on Twitter, and/or check out our personal sites for more of our work.

Questions? We (might) have answers.

Download the presentation slides here:

http://j.mp/drupal-compass

Feel free to share the link with friends, enemies, etc.

What did you think?

Locate this session on the DrupalCon Denver website
http://denver2012.drupal.org/program

Click the Take the Survey link.

Thank You!