Sass & Compass @ SenchaConf

Editor's Notes

2. * 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)
9. Design in code, manage change without bleed
10. compass v0.11 sass 3.1
11. 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.
12. 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.
13. 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.
15. Colors, patterns, prefixes
16. * 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.
33. Sass knows all color representations
89. Use .sass instead of .scss Completely interoperable less noise: curly braces => indentation, ; => newline @include => +, @mixin => =
91. * resets * grids * typography
92. Best practices and patterns that are proven to work across a range of browsers.
93. 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”.
94. 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)
101. * 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)
102. * 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)
103. This is the default, assets will be served root relative, via a web-server without specifying a host.
104. Sometimes you find out your app will be hosted in a folder.
105. a host may be specified by asset type.
106. You can specify the asset host for each asset.
107. 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
109. 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...
111. 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.
112. Best practices, Battle tested, Updated regularly to reflect browser advancements. Your code remains the same.
118. Share libraries -- not just snippets on a blog post.