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

14,295

Published on

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

Published in: Technology
1 Comment
34 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,295
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
369
Comments
1
Likes
34
Embeds 0
No embeds

No notes for slide

  • * graduated from Caltech in 2000
    * 4 startups, F2E, UI Lead, UI Architect, etc
    * First Employee of Caring.com in 5/2007
    * Discovered Sass about 2 years ago when it was already 2 years old, created sass port of blueprint css framework, created compass, joined the Sass core team, Recently joined the blueprint core team (again)


  • CSS is a major front for the Browser War v2.0
    Casualty of War: Front-End Developers
    What do all of these new features have in common? They&amp;#x2019;re all about the browser -- None of them address how we author stylesheets.

  • CSS is a major front for the Browser War v2.0
    Casualty of War: Front-End Developers
    What do all of these new features have in common? They&amp;#x2019;re all about the browser -- None of them address how we author stylesheets.


  • * Sass is a stylesheet language - Built on the same primitives as CSS but with more expressiveness.
    * Compass is a framework that uses sass to help you author your stylesheets by providing shared tools, libraries, and standards that help users share stylesheets with each other.
    * Sass and Compass have Co-evolved over the past two years. Sass has existed for about 3.5 years.

  • Example of Sass in action.
    &amp;#x201C;I thought Sass was supposed to make my stylesheets smaller?&amp;#x201D;
    Sass excels at making implicit relationships explicit -- smaller is not the goal: easier to maintain is the goal. Often this results in a smaller file.
  • Global: $background-color, $foreground-color, $widget-width
    Scoped: $border-width



  • * Later today, you&amp;#x2019;ll hear from Nicole Sullivan, creator of OOCSS.
    * The idea of class inheritance came from her.
    * Nathan and I generalized it to selector inheritance and created the first complete implementation.
    * I think that Sass is a great compliment to the OOCSS framework.

  • * Write colors how you think of them
    * operate on colors in the hsl domain
    * build themes from just a few base colors
    * keep color relationships explicit

  • * Create mathematical expressions to simplify change.



  • There are other control flow directives like @for, @while but these have only marginal usefulness.
  • partials start with an underscore but the imports do not require the underscore. this facilitates converting to a partial.
    partials do not generate css files
    imports place the contents of the imported file at the point of import. imports make the mixins and global variables of the imports file available.

  • Use .sass instead of .scss
    Completely interoperable
    less noise: curly braces =&gt; indentation, ; =&gt; newline
    @include =&gt; +, @mixin =&gt; =

  • * resets
    * grids
    * typography
  • Best practices and patterns that are proven to work across a range of browsers.
  • None of these are frameworks. They are libraries.
    But it&amp;#x2019;s easier to make a new term than convince everyone to start calling them &amp;#x201C;css libraries&amp;#x201D;.

  • So Compass is a &amp;#x201C;Stylesheet Authoring Framework&amp;#x201D;

    Or for the geeks: A Meta Framework (A framework for css frameworks -- we&amp;#x2019;ll get to this later)
  • You might want to drag this to your dock

    Someday there will be a GUI. But until then, this really isn&amp;#x2019;t very hard to do.






  • * By putting the asset locations in a configuration file, you can let compass figure out how to tell the browser where they are. This makes it easier to refactor and still use relative urls when you want to.
    * At any time, you can set &amp;#x201C;relative_assets = true&amp;#x201D; and you&amp;#x2019;ll be able to serve images off the local filesystem irrespective of your other settings.
    timestamps are automatically added to invalidate browser caches when images change. (can be disabled)
  • * By putting the asset locations in a configuration file, you can let compass figure out how to tell the browser where they are. This makes it easier to refactor and still use relative urls when you want to.
    * At any time, you can set &amp;#x201C;relative_assets = true&amp;#x201D; and you&amp;#x2019;ll be able to serve images off the local filesystem irrespective of your other settings.
    timestamps are automatically added to invalidate browser caches when images change. (can be disabled)
  • This is the default, assets will be served root relative, via a web-server without specifying a host.
  • Sometimes you find out your app will be hosted in a folder.
  • a host may be specified by asset type.
  • You can specify the asset host for each asset.

  • Data urls let us embed assets directly in our stylesheets.
    Good for small images like icons where HTTP overhead is large compared to file size.
    Incurs encoding bloat: 33% uncompressed, 2-3% when gzipped,
    Doesn&amp;#x2019;t work in IE6 &amp; IE7

  • This is how the sausage is made. It&amp;#x2019;s not pretty but the finished product tastes pretty good. Compass is your CSS sausage factory.

    But here&amp;#x2019;s the thing...

  • Ok, most of what&amp;#x2019;s in compass is pretty straightforward. You could have written it yourself if you wanted. But not this. This was hard to do. There are dozens of man hours in this bit.
  • Best practices, Battle tested, Updated regularly to reflect browser advancements. Your code remains the same.







  • Share libraries -- not just snippets on a blog post.







  • 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)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×