Authoring Stylesheets with Compass & Sass

15,323 views

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
15,323
On SlideShare
0
From Embeds
0
Number of Embeds
259
Actions
Shares
0
Downloads
385
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’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’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.
    “I thought Sass was supposed to make my stylesheets smaller?”
    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’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 => indentation, ; => newline
    @include => +, @mixin => =

  • * 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’s easier to make a new term than convince everyone to start calling them “css libraries”.

  • So Compass is a “Stylesheet Authoring Framework”

    Or for the geeks: A Meta Framework (A framework for css frameworks -- we’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’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 “relative_assets = true” and you’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 “relative_assets = true” and you’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’t work in IE6 & IE7

  • This is how the sausage is made. It’s not pretty but the finished product tastes pretty good. Compass is your CSS sausage factory.

    But here’s the thing...

  • Ok, most of what’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)

    ×