$30 off During Our Annual Pro Sale. View Details »

Drupal & Compass

Nathan Smith
March 02, 2012

Drupal & Compass

Slides for my talk at DrupalCon Denver, on using Sass and Compass in Drupal themes.

http://denver2012.drupal.org/program/sessions/using-sass-compass-drupal-theming

Nathan Smith

March 02, 2012
Tweet

More Decks by Nathan Smith

Other Decks in Design

Transcript

  1. View Slide

  2. Relax. Don’t fret over taking notes.
    Download the presentation slides here:
    http://j.mp/drupal-compass
    Note: It’s okay if you read ahead. We don’t mind. :)

    View Slide

  3. Design & User Experience
    Using Sass & Compass
    in Drupal Theming
    Nathan Smith & Matt Farina

    View Slide

  4. Hello :)
    We like Drupal, Sass & Compass.
    We hope you do too, or will soon.
    Let us introduce ourselves...

    View Slide

  5. Nathan Smith is
    a UX designer at
    Matt Farina is a
    web developer at
    HP Cloud Services
    http://projekt202.com
    http://hpcloud.com
    yay,  books!
    Note: We co-authored these books, respectively. We’re not taking all the credit.

    View Slide

  6. Sass & Compass are made possible by...
    http://hamptoncatlin.com
    He is no longer active
    in working on Sass.
    http://nex-3.com
    Still works on Sass,
    in his “20% time.”
    http://chriseppstein.github.com
    Also, member of
    Sass core team.
    Nathan Weizenbaum
    Google Chrome (Dart)
    Hampton Catlin
    created Haml & Sass
    Chris Eppstein
    created Compass
    ...and other community contributors.

    View Slide

  7. Part 1:
    Why Sass?

    View Slide

  8. “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].”
    On -webkit vendor prefix drama
    http://infrequently.org/2012/02/misdirection
    Alex Russell @slightlylate
    Google Chrome team / Dojo Toolkit co-creator

    View Slide

  9. So what’s to be done about CSS?
    The answer has actually been staring us in the face
    for awhile now, but it’s 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?

    View Slide

  10. http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
    CSS served to browser
    Neatly organized *.sass

    View Slide

  11. “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

    View Slide

  12. 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.

    View Slide

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

    View Slide

  14. View Slide

  15. 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 that’s okay.
    Compass is essentially Sass’
    extra-awesome secret-sauce.

    View Slide

  16. Oversimplification, FTW!
    Compass is to Sass
    as
    jQuery is to JavaScript

    View Slide

  17. Sass & SCSS are functionally equivalent
    We prefer using Sass instead of
    SCSS because hey, less typing!

    View Slide

  18. Anti-pattern of nested selectors in Sass

    View Slide

  19. Compass makes vendor prefixes easy...

    View Slide

  20. Compass brings sanity to gradients...

    View Slide

  21. Text editors and IDE’s 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
    http://sass-lang.com/editors.html
    ^
    We  recommend

    View Slide

  22. 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”

    View Slide

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

    View Slide

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

    View Slide

  25. Great for CSS, in Ruby on Rails projects.
    Great for CSS, in Ruby projects.
    Great for CSS, in any project!
    Impression of Sass...

    View Slide

  26. What if I want to use Sass for something
    that wasn’t written in Ruby... impossible?
    But, wait...

    View Slide

  27. When I think about not having Sass...
    http://en.wikipedia.org/wiki/The_Incredible_Hulk_(TV_series)

    View Slide

  28. 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.
    So, does Sass require Ruby?

    View Slide

  29. Part 2:
    Whither a
    module?

    View Slide

  30. Why use a Drupal Module?
    Possibly  Bad  Reasons...
    — You don’t 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.

    View Slide

  31. 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

    View Slide

  32. 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)

    View Slide

  33. 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

    View Slide

  34. 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 wouldn’t make much sense to port Drupal
    out of PHP, we think it’s 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.
    “Best tool for the job”

    View Slide

  35. ACHIEVEMENT UNLOCKED!
    Presuppositions Challenged
    Note: I don’t 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)

    View Slide

  36. Part 3:
    How to use

    View Slide

  37. 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
    Prerequisite: Ruby

    View Slide

  38. Setting up Compass & Sass
    gem install compass
    From the command-line (Terminal.app, iTerm, etc)...
    This will also automatically download the Sass gem,
    a dependency of Compass. There’s no need to install
    separately. They’re typically used in tandem anyway.

    View Slide

  39. Take a hybrid PHP + Ruby approach

    View Slide

  40. Add config.rb to your theme directory

    View Slide

  41. “cd” to your theme directory,
    then run “compass watch”
    If you just want to flush cache and compile, run
    “compass clean && compass compile”

    View Slide

  42. 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, aren’t compiled
    to *.css files individually.

    View Slide

  43. 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
    F
    or  brevity,  only  CSS  files  shown
    Files  in  orange  
    are  listed  to  
    prevent  Drupal  
    from  adding  ‘em  
    automatically.

    View Slide

  44. 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
    F
    or  brevity,  only  CSS  files  shown
    Minus the nonexistent files, to ward off Drupal defaults...
    This compresses down to a single CSS file,
    in the Performance cache setting in Drupal.

    View Slide

  45. 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
    Theme *.info file – after Sass
    F
    or  brevity,  only  CSS  files  shown
    Files  in  orange  
    are  listed  to  
    prevent  Drupal  
    from  adding  ‘em  
    automatically.

    View Slide

  46. stylesheets[all][] = assets/css/application.css
    Theme *.info file – after Sass
    ACHIEVEMENT UNLOCKED
    Only one CSS HTTP request!
    With (or without) cached CSS
    compression in Performance.
    Minus the nonexistent files, to ward off Drupal defaults...

    View Slide

  47. This is still worth
    doing. I’ll explain
    why in a second.

    View Slide

  48. Even if using “compass watch” with:
    output_style = :compressed
    You should still use Drupal’s CSS
    compression under Performance.
    Why? Well, let’s flip to the next slide...

    View Slide

  49. Benefits of using Drupal’s CSS
    compression, not just Compass:
    1. Cache-busting. File name is changed to...
    “css_VvtjvgJd9tI4sfrbHdy7Yvyc5fm9jVFoHRnrEBsJlQs.css”
    2. instead of @import
    (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.

    View Slide

  50. Compass output, before Drupal compression

    View Slide

  51. Compass output, after Drupal compression

    View Slide

  52. Achievement Unlocked!
    You have now attained CSS bliss.
    Don’t forget to rate this as the best
    talk you’ve ever heard in your life.
    Or, maybe we forgot something...

    View Slide

  53. Stop the presses!
    What  about  debugging?
    How do I see what styles
    are coming from which
    *_file.sass partial?

    View Slide

  54. Part 4:
    Debugging
    & Demos

    View Slide

  55. View Slide

  56. Cryptic error
    messages are
    never helpful.

    View Slide

  57. ^ I believe debugging this way stinks.

    View Slide

  58. When things don’t go as planned...
    http://autos.yahoo.com/blogs/motoramic/porsche-stuck-wet-cement-proves-karma-exists-210302568.html

    View Slide

  59. Just a one-line change in config.rb

    View Slide

  60. Emits *.sass “stack trace” for each style

    View Slide

  61. 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.

    View Slide

  62. Now time for some
    demonstrations :)
    Note: If you’re viewing these slides, but missed our
    session, we showed “compass watch” in action.

    View Slide

  63. “Luck, be a lady...” (live demo = dice roll)
    http://kloucksphoto.blogspot.com/2011/06/guys-and-dolls-witty-wry-wonderful.html

    View Slide

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

    View Slide

  65. “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
    (Nicole helped make Yahoo & Facebook more efficient)

    View Slide

  66. Feel free to say hi on Twitter, and/or check out our personal sites for more of our work.
    http://twitter.com/NathanSmith
    Personal site — http://sonspring.com
    http://twitter.com/MattFarina
    Personal site — http://mattfarina.com
    Thanks for coming. Keep in touch!

    View Slide

  67. Questions? We (might) have answers.
    Feel free to share the link with friends, enemies, etc.
    Download the presentation slides here:
    http://j.mp/drupal-compass

    View Slide

  68. 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!

    View Slide