2. You’re there for them. We’re here for you.
CHRIS EPPSTEIN FOLLOW ME ON TWITTER:
SOFTWARE ARCHITECT FOR CARING.COM @CHRISEPPSTEIN
3. HOLD ON TO YOUR HAT
WE’VE GOT A LOT TO LEARN. CSS HAS GROWN UP.
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
19. Sass: Numeric Units
Handles any unit (even EXAMPLES
those not yet defined in
CSS)
allows complex units in
intermediate forms
Understands
compatible units
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. 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. Prefix Hell
SIMPLE.
LIKE IT WILL BE.
ONLY NOW.
REALLY?
WHO DOES THIS?
WHAT A PAIN.
51. Browser Support
All Modern Browsers
Firefox 2
IE6 & 7
Exceptions are noted in the docs.
Compass ♥’s progressive enhancement
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. 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. 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!
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
59. Similar Projects
Less (Ruby, Javascript)
CSScaffold (PHP)
Turbine (PHP)
xCSS (PHP)
CleverCSS (Python)
Mechanical CSS (PHP)
HSS (Neko)
Hinweis der Redaktion
* 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.
* 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.
