Sass & Compass @ SenchaConf

Authoring Stylesheets With Sass and Compass

Chris Eppstein Software Architect for Caring.com Creator of Compass Member of Sass Core Team Follow You’re there for them. We’re here for you. @chriseppstein

Sencha Touch Uses Sass & Compass

Hold on to Your Hat We’ve got a lot to learn. Stylesheets have grown up.

Sass Syntax

Compass Libraries

Compass Project Structure

Style Faster

Sneak Peek

CSS3 33 New Selectors 120+ New Properties 3 New @-rules Enhanced Media Queries

CSS3 More Sophisticated More Powerful More Complex

CSS3 More Sophisticated More Powerful More Complex No new Syntax To Manage Complexity.

Sass & Compass A workhorse for CSS developers. Simplifying CSS Using Abstractions.

Stylesheets - Drudgery = Compass + Sass

What is Sass? What is Compass?

Sass Syntax

Variables

Nesting

Parent Reference Sass

Mixins

Deﬁnition

Include

Result

Inheritance

Colors

rgba(#f00, 1.0) hsla(0deg, 100%, 100%, 1) hsl(0deg, 100%, 100%) #f00 rgb(255, 0, 0) red RED rgba(255, 0, 0, 1.0)

Advanced Theming mix(red, blue) => #7f007f lighten(red, 10%) => #ff3333 darken(red, 10%) => #cc0000 desaturate(red, 10%) => #f20d0d saturate(#511, 10%) => #5a0c0c fade-out(red, 0.25) => rgba(255, 0, 0, 0.75) fade-in(..., 0.25) => rgba(255, 0, 0, 0.75) grayscale(red) => #808080 complement(red) => #00ffff

Advanced Theming mix(red, blue) => #7f007f lighten(red, 10%) => #ff3333 darken(red, 10%) => #cc0000 desaturate(red, 10%) => #f20d0d saturate(#c00, 10%) => #cc0000 fade-out(red, 0.25) => rgba(255, 0, 0, 0.75) fade-in(..., 0.25) => rgba(255, 0, 0, 0.75) grayscale(red) => #808080 complement(red) => #00ffff

Advanced Theming saturation(red) => 100% lightness(red) => 50% hue(red) => 0deg red(red) => 255 blue(red) => 0 green(red) => 0 alpha(red) => 1

Manage Interdependent Values

In Place Calculations

Build Simple-to-Use Abstractions

Stylesheets you can visualize Clarity of Intent

How do I propagate Change? A short rant by Chris Eppstein (cover the children’s ears)

Don’t Repeat Yoursel

CSS Smaller? Yes. Simpler? No.

Less Characters ≠ Less Typing

Each distinct concept has a single edit point.

A single change. A single edit. A single compile. We have machines.

Do you understand variables?

Do you understand mixins?

Then CSS is NOT for you.

CSS is for the Mythical Designer who is too stupid to understand High School Algebra.

How insulting is that?

This ﬂawed rationale is why CSS sucks.

If you want to make something accessible to beginners...

...make it powerful enough to be made simple by the experts.

There is an alternative. Now back to the show

Conditionals

A simple abstraction. Complexity underneath.

Build a Grid.

Use a Grid

Sass has features most projects don’t need.

So people like me can make life simple for you.

Server Side Imports

Partials

Small ﬁles with a single purpose.

Imports bring in: variables, mixins, & styles.

Silent Coments

CSS Comments

Output Formatting

nested

expanded

compact

compressed

Output Compression

Output Compression •Smaller colors •No unnecessary whitespace •Beats Google’s Pagespeed compressor by ~4% •Use this in Production •Keep your ﬁles formatted

(Optional) Whitespace Active Syntax

Semicolons Suck

Curly Braces Suck

They make parsing easier

Lazy Languages make users tokenize

Sass: Alternate Syntax

CSS is 14 years Old We’ve developed Some Best Practices OOCSS

CSS Frameworks A Codiﬁcation of Best Practices OOCSS

Compass A Real Stylesheet Framework Not Frameworks OOCSS

Compass A Stylesheet Authoring Framework • Project Context • Core Library • Semantic Frameworks • Extensions • Community

Project Context Create a new project in seconds compass create <project> --using <framework>

Project Context Compass will Watch for changes and compile compass watch

If you need Help compass help Self documenting

If you need Help Online Documentation

If you need Help The Community http://groups.google.com/group/compass-users http://groups.google.com/group/sass-lang

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 assets.css

Absolute Assets: config.rb Web Server Required assets.scss assets.css

Set an Application config.rb Path Context assets.scss assets.css

Image Host (CDN/S3/etc) config.rb assets.scss assets.css

Use Asset Hosts config.rb assets.scss assets.css

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 directory image-url - url to assets in the images directory inline-image - embed an image inline-font-files - embed a font ﬁle http://compass-style.org/docs/reference/compass/helpers/ urls/

CSS3 It’s pretty cool. But it’s still a work in progress: Vendor preﬁx hell Incompatible syntaxes Graceful degradation / progressive enhancement considerations Buggy implementations

Preﬁx Hell Really? Simple. Who does this? Like it Will Be. What a Pain. Only now.

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 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/

Compass Utilities Resets Sticky Footer Clearﬁx Cross browser best practices: ﬂoats, mins Links: hover-link, link-colors, unstyled-link Lists: pretty bullets, no-bullets, horizontal lists, inline lists Sprites Tables: striping borders & basic styling Text: ellipsis, no-wrap, text-replacement http://compass-style.org/docs/reference/compass/utilities/

Mixin Library A La Carte Customizable

Browser Support All Modern Browsers Firefox 2 IE6 & 7 Exceptions are noted in the docs. Compass ♥’s progressive enhancement

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

Susy Created by an Eric Meyer for Compass Uses Natalie Down’s CSS Systems approach to grids. Can be elastic, ﬁxed, or ﬂuid. Vertical Rhythm Utilities http://susy.oddbird.net/

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!

My Teammates Nathan Wiezenbaum (@nex3) - Sass & Haml Eric Meyer (@eriiicam) - Compass, Susy Brandon Mathis (@imathis) - Compass, Fancy Buttons

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

Photo Credits http://www.flickr.com/photos/mistressb/3961765594/ http://www.flickr.com/photos/katietegtmeyer/ 68401475/ http://www.flickr.com/photos/empics/2846078511/ http://www.flickr.com/photos/ 7202153@N03/3361299763/

Similar Projects Less (Ruby, Javascript) CSScaffold (PHP) Turbine (PHP) xCSS (PHP) CleverCSS (Python) Mechanical CSS (PHP) HSS (Neko)

Sass & Compass @ SenchaConf

by chriseppstein on Nov 16, 2010

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 31

Statistics

Sass & Compass @ SenchaConf Presentation Transcript