Authoring Stylesheets with Compass & Sass

Editor's Notes

• #3: * 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)
• #6: 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.
• #7: 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.
• #9: * 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.
• #11: 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.
• #12: Global: $background-color, $foreground-color, $widget-width Scoped: $border-width
• #16: * 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.
• #18: * 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
• #19: * Create mathematical expressions to simplify change.
• #21: There are other control flow directives like @for, @while but these have only marginal usefulness.
• #22: 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.
• #24: Use .sass instead of .scss Completely interoperable less noise: curly braces => indentation, ; => newline @include => +, @mixin => =
• #26: * resets * grids * typography
• #27: Best practices and patterns that are proven to work across a range of browsers.
• #28: 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”.
• #29: 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)
• #30: 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.
• #37: * 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)
• #38: * 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)
• #39: This is the default, assets will be served root relative, via a web-server without specifying a host.
• #40: Sometimes you find out your app will be hosted in a folder.
• #41: a host may be specified by asset type.
• #42: You can specify the asset host for each asset.
• #43: 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
• #45: 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...
• #47: 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.
• #48: Best practices, Battle tested, Updated regularly to reflect browser advancements. Your code remains the same.
• #56: Share libraries -- not just snippets on a blog post.