Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AUTHORING STYLESHEETS
PROJECT




          WITH SASS AND COMPASS
DATE                   CLIENT
          7/28/2010       ...
You’re there for them. We’re here for you.




CHRIS EPPSTEIN                                   FOLLOW ME ON TWITTER:
SOFT...
HOLD ON TO YOUR HAT
WE’VE GOT A LOT TO LEARN. CSS HAS GROWN UP.
Today

Learn the Sass Syntax and features

Learn your way around a compass project

Overview of Compass Libraries

Style a...
CSS3
33 New Selectors
120+ New Properties
3 New @-rules
Enhanced Media Queries
CSS3
More Sophisticated
More Powerful
More Complex



    NO NEW FEATURES TO MANAGE COMPLEXITY.
Sass &
Compass
A workhorse for CSS
developers.




      SIMPLIFYING CSS USING ABSTRACTIONS.
WHAT IS SASS?
WHAT IS COMPASS?
Sass Features
Variables              Conditionals

Nested Rules           Server-side Imports

Mixins                 Outp...
Sass Syntax




   SASS       CSS
Sass: Variables




    SASS          CSS
Sass: Nested Rules




    SASS        CSS
Sass: Mixins




    SASS       CSS
Mixins: Write Your Own
Sass: Selector Inheritance




    SASS           CSS
Sass: Colors




    SASS       CSS
Sass: Colors	
    Hex                         FUNCTIONS
                                   mix
    rgb/rgba
              ...
Sass: Mathematical Expressions




     SASS             CSS
Sass: Numeric Units	
Handles any unit (even    EXAMPLES
those not yet defined in
CSS)

allows complex units in
intermediate...
Sass: Conditionals
Sass: Server Side Imports



  _sidebar.scss




  screen.scss       screen.css
Sass: Output Formats

                       COMPACT



                    COMPRESSED




NESTED   EXPANDED
Sass: Alternate Syntax
Sass: Alternate Syntax
QUESTIONS ABOUT SASS?
LET’S CLEAR THOSE UP BEFORE WE GO ANY FURTHER DOWN THE RABBIT HOLE.
OOCSS

CSS IS 14 YEARS OLD
WE’VE DEVELOPED SOME BEST PRACTICES
OOCSS

CSS FRAMEWORKS
A CODIFICATION OF BEST PRACTICES
NOT
 FRAMEWORKS
      OOCSS

COMPASS
A REAL STYLESHEET FRAMEWORK
Features
    • Project Context
    • Core Library
    • Semantic Frameworks
    • Extensions
    • Community


COMPASS
A S...
WINDOWS USERS: COMPASS WORKS FOR YOU TOO!

DON’T BE SCARED
WE’RE GOING TO USE THE TERMINAL
compass create <project> --using <framework>




PROJECT CONTEXT
CREATE A NEW PROJECT IN SECONDS
compass watch




PROJECT CONTEXT
COMPASS WILL WATCH FOR CHANGES AND COMPILE AUTOMATICALLY
compass help




IF YOU NEED HELP
SELF DOCUMENTING
IF YOU NEED HELP
ONLINE DOCUMENTATION
http://groups.google.com/group/compass-users
                    http://groups.google.com/group/haml




IF YOU NEED HELP
...
Projects are more than just
Stylesheets
Images

Fonts

JavaScripts
Where are your Assets?




assets.scss
Relative Assets:                     config.rb


No Web Server Required



                assets.scss




               ...
Absolute Assets:
Web Server Required
                                     config.rb




                assets.scss




  ...
Set an Application                        config.rb
Path Context



                     assets.scss




                 ...
Image Host
(CDN/S3/etc)                 config.rb




               assets.scss




                             assets.c...
Use Asset Hosts
                                config.rb




                  assets.scss




                          ...
In your CSS?!




WIKIPEDIA REFERENCE   COMPASS DOCUMENTATION
Asset Helpers
 stylesheet-url - url to assets stored in the
 CSS directory

 font-url - url to assets in the font director...
CSS3
You’re going to hear a lot about CSS3 today.

It’s pretty cool.

But: It’s a #$%^@ mess.

Vendor prefix hell

Incompat...
Prefix Hell



                       SIMPLE.
                   LIKE IT WILL BE.
                      ONLY NOW.

     REA...
Incompatible Implementations




http://compass-style.org/docs/reference/compass/css3/gradient/
Compass CSS3 Modules
          UPDATED FOR YOU AS BROWSERS DEVELOP
Background Clip                 Font Face

Background O...
Compass Utilities
Resets                           Lists: pretty bullets,
                                 no-bullets, hor...
Mixin Library

A La Carte

Customizable
Browser Support

All Modern Browsers

Firefox 2

IE6 & 7

Exceptions are noted in the docs.

Compass ♥’s progressive enhan...
The Zen of Sass
‣ Beautiful Markup
‣ Stylesheets that you can
  visualize
‣ Keep presentation in your
  stylesheets.
‣ Fin...
Susy
Created by an Eric Meyer for Compass

Uses Natalie Down’s CSS Systems approach to
grids.

Can be elastic, fixed, or flu...
Some Great Extensions
  Lemonade - Sprite Generator

  960.gs - The 960 grid system ported to Sass

  Lightboxes - Pure CS...
QUESTIONS ABOUT COMPASS?
My Teammates
Nathan Wiezenbaum (@nex3) - Sass & Haml

Eric Meyer (@eriiicam) - Compass, Susy

Brandon Mathis (@imathis) - ...
Compass is Charityware


If you use Compass & Sass and they make your
life better, please help make someone else’s life
be...
Photo Credits
  http://www.flickr.com/photos/oly_paul/3989018045/



  http://www.flickr.com/photos/empics/2846078511/



  ...
Similar Projects
Less (Ruby, Javascript)

CSScaffold (PHP)

Turbine (PHP)

xCSS (PHP)

CleverCSS (Python)

Mechanical CSS ...
Upcoming SlideShare
Loading in …5
×

Authoring Stylesheets with Compass & Sass

15,550 views

Published on

Slides from the talk I gave at the CSS Summit 2010.

Published in: Technology

Authoring Stylesheets with Compass & Sass

  1. 1. AUTHORING STYLESHEETS PROJECT WITH SASS AND COMPASS DATE CLIENT 7/28/2010 CSS SUMMIT
  2. 2. You’re there for them. We’re here for you. CHRIS EPPSTEIN FOLLOW ME ON TWITTER: SOFTWARE ARCHITECT FOR CARING.COM @CHRISEPPSTEIN
  3. 3. HOLD ON TO YOUR HAT WE’VE GOT A LOT TO LEARN. CSS HAS GROWN UP.
  4. 4. Today Learn the Sass Syntax and features Learn your way around a compass project Overview of Compass Libraries Style a webpage in minutes Discover a new way of thinking about design
  5. 5. CSS3 33 New Selectors 120+ New Properties 3 New @-rules Enhanced Media Queries
  6. 6. CSS3 More Sophisticated More Powerful More Complex NO NEW FEATURES TO MANAGE COMPLEXITY.
  7. 7. Sass & Compass A workhorse for CSS developers. SIMPLIFYING CSS USING ABSTRACTIONS.
  8. 8. WHAT IS SASS? WHAT IS COMPASS?
  9. 9. Sass Features Variables Conditionals Nested Rules Server-side Imports Mixins Output Formatting & Compression Selector Inheritance Silent Comments Colors Optional Whitespace- Math Aware Syntax
  10. 10. Sass Syntax SASS CSS
  11. 11. Sass: Variables SASS CSS
  12. 12. Sass: Nested Rules SASS CSS
  13. 13. Sass: Mixins SASS CSS
  14. 14. Mixins: Write Your Own
  15. 15. Sass: Selector Inheritance SASS CSS
  16. 16. Sass: Colors SASS CSS
  17. 17. Sass: Colors Hex FUNCTIONS mix rgb/rgba darken/lighten hsl/hsla transparentize/opacify Named Colors compliment/adjust-hue Alpha Layers saturate/desaturate/ grayscale accessors & more HTTP://SASS-LANG.COM/DOCS/YARDOC/SASS/SCRIPT/FUNCTIONS.HTML
  18. 18. Sass: Mathematical Expressions SASS CSS
  19. 19. Sass: Numeric Units Handles any unit (even EXAMPLES those not yet defined in CSS) allows complex units in intermediate forms Understands compatible units
  20. 20. Sass: Conditionals
  21. 21. Sass: Server Side Imports _sidebar.scss screen.scss screen.css
  22. 22. Sass: Output Formats COMPACT COMPRESSED NESTED EXPANDED
  23. 23. Sass: Alternate Syntax
  24. 24. Sass: Alternate Syntax
  25. 25. QUESTIONS ABOUT SASS? LET’S CLEAR THOSE UP BEFORE WE GO ANY FURTHER DOWN THE RABBIT HOLE.
  26. 26. OOCSS CSS IS 14 YEARS OLD WE’VE DEVELOPED SOME BEST PRACTICES
  27. 27. OOCSS CSS FRAMEWORKS A CODIFICATION OF BEST PRACTICES
  28. 28. NOT FRAMEWORKS OOCSS COMPASS A REAL STYLESHEET FRAMEWORK
  29. 29. Features • Project Context • Core Library • Semantic Frameworks • Extensions • Community COMPASS A STYLESHEET AUTHORING FRAMEWORK
  30. 30. WINDOWS USERS: COMPASS WORKS FOR YOU TOO! DON’T BE SCARED WE’RE GOING TO USE THE TERMINAL
  31. 31. compass create <project> --using <framework> PROJECT CONTEXT CREATE A NEW PROJECT IN SECONDS
  32. 32. compass watch PROJECT CONTEXT COMPASS WILL WATCH FOR CHANGES AND COMPILE AUTOMATICALLY
  33. 33. compass help IF YOU NEED HELP SELF DOCUMENTING
  34. 34. IF YOU NEED HELP ONLINE DOCUMENTATION
  35. 35. http://groups.google.com/group/compass-users http://groups.google.com/group/haml IF YOU NEED HELP THE COMMUNITY
  36. 36. Projects are more than just Stylesheets Images Fonts JavaScripts
  37. 37. Where are your Assets? assets.scss
  38. 38. Relative Assets: config.rb No Web Server Required assets.scss assets.css
  39. 39. Absolute Assets: Web Server Required config.rb assets.scss assets.css
  40. 40. Set an Application config.rb Path Context assets.scss assets.css
  41. 41. Image Host (CDN/S3/etc) config.rb assets.scss assets.css
  42. 42. Use Asset Hosts config.rb assets.scss assets.css
  43. 43. In your CSS?! WIKIPEDIA REFERENCE COMPASS DOCUMENTATION
  44. 44. Asset Helpers stylesheet-url - url to assets stored in the CSS directory font-url - url to assets in the font directory image-url - url to assets in the images directory inline-image - embed an image inline-font-files - embed a font file http://compass-style.org/docs/reference/compass/helpers/urls/
  45. 45. CSS3 You’re going to hear a lot about CSS3 today. It’s pretty cool. But: It’s a #$%^@ mess. Vendor prefix hell Incompatible syntaxes Graceful degradation / progressive enhancement considerations Buggy implementations
  46. 46. Prefix Hell SIMPLE. LIKE IT WILL BE. ONLY NOW. REALLY? WHO DOES THIS? WHAT A PAIN.
  47. 47. Incompatible Implementations http://compass-style.org/docs/reference/compass/css3/gradient/
  48. 48. Compass CSS3 Modules UPDATED FOR YOU AS BROWSERS DEVELOP Background Clip Font Face Background Origin Gradient Background Size Inline Block Border Radius Opacity Box Text Shadow Box Shadow Transform Box Sizing Transition Columns http://compass-style.org/docs/reference/compass/css3/
  49. 49. Compass Utilities Resets Lists: pretty bullets, no-bullets, horizontal Sticky Footer lists, inline lists Clearfix Sprites Cross browser best Tables: striping practices: floats, mins borders & basic styling Links: hover-link, link- Text: ellipsis, no-wrap, colors, unstyled-link text-replacement http://compass-style.org/docs/reference/compass/utilities/
  50. 50. Mixin Library A La Carte Customizable
  51. 51. Browser Support All Modern Browsers Firefox 2 IE6 & 7 Exceptions are noted in the docs. Compass ♥’s progressive enhancement
  52. 52. The Zen of Sass ‣ Beautiful Markup ‣ Stylesheets that you can visualize ‣ Keep presentation in your stylesheets. ‣ Find your own code style ‣ Build your own framework ‣ Don’t use what you don’t like
  53. 53. Susy Created by an Eric Meyer for Compass Uses Natalie Down’s CSS Systems approach to grids. Can be elastic, fixed, or fluid. Vertical Rhythm Utilities http://susy.oddbird.net/
  54. 54. Some Great Extensions Lemonade - Sprite Generator 960.gs - The 960 grid system ported to Sass Lightboxes - Pure CSS lightboxes Slideshows - Pure CSS slideshows Fancy Buttons - Pure CSS Button Generator BUILDING AN EXTENSION IS EASY!
  55. 55. QUESTIONS ABOUT COMPASS?
  56. 56. My Teammates Nathan Wiezenbaum (@nex3) - Sass & Haml Eric Meyer (@eriiicam) - Compass, Susy Brandon Mathis (@imathis) - Compass, Fancy Buttons
  57. 57. Compass is Charityware If you use Compass & Sass and they make your life better, please help make someone else’s life better by making a tax-deductible donation to the United Mitochondrial Disease Foundation. http://umdf.org/compass
  58. 58. Photo Credits http://www.flickr.com/photos/oly_paul/3989018045/ http://www.flickr.com/photos/empics/2846078511/ http://www.flickr.com/photos/7202153@N03/3361299763/ http://www.flickr.com/photos/euart/282104427/
  59. 59. Similar Projects Less (Ruby, Javascript) CSScaffold (PHP) Turbine (PHP) xCSS (PHP) CleverCSS (Python) Mechanical CSS (PHP) HSS (Neko)

×