sass. - o'reilly mediaassets.en.oreilly.com/1/event/59/sass_ the future of stylesheets... ·...

Sass.The Future of Stylesheets.

Chris EppsteinFollow me @chriseppsteinArchitect - Caring.comCreator - Compass Stylesheet FrameworkCore Contributor - Sass

A website for caregivers of the sick and elderly.

The right information at just the right time

We’re HIRING!

Book:Sass & Compass In ActionBuy the pre-release now and save 40%

http://www.manning.com/netherland/DISCOUNT CODE: sass40 (Good through Friday)

Today

RationaleWhy does Sass exist?What problems does it solve?

SyntaxWhat does Sass provide?

Best PracticesTips, tricks & pitfalls

Questions?Please ask them.

What is “Sass”?Syntactically Awesome StyleSheets

Yes, it’s an acronym.But, it’s *not* all caps.Why? I don’t know. Alternate SyntaxCompiles to CSSTo understand Sass, you must know CSS

What is CSS?• Originated in Academia• 14 Years Old• Three Primitives:‣Selectors‣Properties‣Values

CSS is Pretty.Pretty dumb.

CSS Selectors are great -- that’s why we use them in jQuery & HamlProperties are simple key/value pairs.CSS is elegantly simple.

Never in the history of software have developers been asked to do so much with so little.

Maybe my memory doesn’t go back very far.

I’m sure punch cards and assembler sucked.

Browsers & Versions

9 Browsers25 VersionsPace of development is increasing

Multiple Form FactorsDesktop, Mobile, Print...

Dozens of Templates

Experiment & Test

Maintain Consistency

Performant

Due Yesterday

New Hotness:CSS333 New Selectors120+ New Properties3 New @-rulesEnhanced Media Queries

CSS3No new syntax*

* Yet.

•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 was designed for theMythical Designer who is too stupid to understand High School Algebra.

If you want to make something simple for beginners...

...make it powerful enough for the experts to create that simplicity.

I think rails is a great example of this. Ruby is incredibly powerful, that power makes the best practices of web programming accessible and scaffolds the n00bs during the learning process as they peel the layers of abstraction back.

But...

There is an alternative.

What if we gave stylesheets some brains?

What is Sass?• Born from Real World Experience• Brings Software Development

Methodologies to Stylesheets:‣Reusable, distributable libraries‣DRY‣Define abstractions‣Adhere to architectural boundaries

What is Sass?New Primitives:• Variables• Mixins• Selector

Inheritance

• Calculations• Functions• Conditionals• Loops

Alternate SyntaxCompiles to CSSWe’ll get to these primitives in a second

What is Sass?It’s what CSS would have been if we had known then what we know now:

Most stylesheets are written by programmers.

But: Sass in the hands in of a technical designer is a BEAUTIFUL THING

Problem:CSS StylesheetsAre hard to maintain

Don’tRepeatYourself(I don’t have to tell you this -- It’s not like you want to)

A single change.A single edit.A single compile.

We have machines.Let them do the busy work.

Problem:Same ColorMany Representations

Problem:Same ColorDifferent Reasons

Accidentally the same?

redrgb(255, 0, 0)

rgba(255, 0, 0, 1.0)

#f00

rgba(#f00, 1.0)

RED

hsl(0deg, 100%, 100%)

hsla(0deg, 100%, 100%, 1)

You cannot safely Search and Replace a color.

Solution:VariablesThe most requested CSS enhancement

Use variables anywhere a value is allowed.

Problem:Magic ValuesLost knowledge

Deceptively Complex

where do these colors come from? Clearly they’re related -- must be designer voodoo.

Solution:TransformationsDerive values during compilation

As complex as it actually is.

Sass Color Functions

mix(red, blue, 40%) => #660099lighten(red, 10%) => #ff3333darken(red, 10%) => #cc0000desaturate(red, 10%) => #f20d0dsaturate(#511, 10%) => #5a0c0ctransparentize(red, 0.25) => rgba(255, 0, 0, 0.75)opacify(red, 0.25) => rgba(255, 0, 0, 0.75)grayscale(red) => #808080complement(red) => #00ffff

There’s more on the Sass website.

Solution:Make Reusable CalculationsWe call these things “functions”

Deceptively Complex

Why is it 366px? If I want to change the border width, how should I adjust these values?

Solution:Abstractions & CalculationsDerive values during compilation

Create a simple abstraction

Now our changes are obvious and the implementation details elided.

As complex as it actually is.

Currently most of these calculations are done on a scratch pad.

seriously.

Best Practice:Minimize HTTP Round Trips

Problem:Long StylesheetsHard to find your styles.

Don’t use CSS @import.Serve a few, longer stylesheets.

And I mean long...

Seriously, this keeps going...

Solution:Concatenation & Partials

Convention: Each folder has a file of the same name that imports the files contained within it in the correct order.

Partials: Just like with html templates, underscores denote a partial and can only be imported by other stylesheets.

Problem:Shared StylesheetsStyles leak into places you didn’t intend

Sitewide Styles

Forum Blog Articles Directory

Index

Thread

Form

List

Post

Form

Index

Article

Comment

Search

Listing

Review

Solution:Scoped Selectors

CSS gives you carpal tunnel from typing your scopes OVER & OVER AGAIN

Notice that comma selectors are permuted

Sass ProvidesDRY Selectorsvia nesting

Nested Selectors

Compiles to

• Default: descendant• & - context reference• Works with combinators

Problem:Dozens of ImagesSpriting is annoying

Solution:Compass Sprites

gem “compass”

Simple Sprites(Compass makes classes for you)

Or you can define your own selectors.

Problem:Dozens More Images

Solution:Use CSS3 InsteadAbstract vendor prefixes away

gem “compass”

Compass CSS3 mixin arguments mimic the real css3 property values.

Best Practice:Use a CDN / Asset HostsLoad assets faster

Problem:Image URLs Change

relative pathsroot relative pathsroot changesasset hostscdns

Solution:Use URL HelpersJust like in Rails

Compiles to

Separate Content & PresentationBest Practice:

Problem:Classitis

Do you have markup that looks like this?

You’re officially doing it wrong.

But I get it. You need re-use.

Solution:Move Presentation ConcernsThey belong in your stylesheets

This is all you should need.

Compiles to

+

Mixins

MixinsCreate a design vocabularyof common patterns independent from your markup's selector domain

More Mixins

+

Compiles to

More Mixins

+

Compiles to

More Mixins

+

Compiles to

This is all you should need.

Compiles to

Selector Inheritance

We’ve OnlyScratched the Surfacehttp://sass-lang.comhttp://compass-style.org

My Teammates

Lead Developer of SassNathan Wiezenbaum (@nex3)

The Compass Core TeamEric Meyer (@eriiicam)Brandon Mathis (@imathis)Scott Davis (@jetviper21)Nico Hagenburger (@hagenburger)

Compass is Charityware

If you use Compass and it makes 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