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 timeWe’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)

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

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

CSS is Pretty.

CSS is Pretty.Pretty dumb.

Never in the history ofsoftware havedevelopers beenasked to do so muchwith so little.

Browsers & Versions

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

If you want to makesomething simple forbeginners...

...make it powerfulenough for the expertsto create that simplicity.

But...

There is an alternative.

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 • Calculations• Mixins • Functions• Selector • Conditionals Inheritance • Loops

What is Sass?It’s what CSS would have been if we hadknown then what we know now:Most stylesheets are written byprogrammers.

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

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)

Solution:VariablesThe most requested CSS enhancement

Use variables anywhere a value is allowed.

Problem:Magic ValuesLost knowledge

Deceptively Complex

Solution:TransformationsDerive values during compilation

As complex as it actually is.

Sass Color Functionsmix(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) => #00ffffThere’s more on the Sass website.

Solution:Make Reusable CalculationsWe call these things “functions”

Deceptively Complex

Solution:Abstractions &CalculationsDerive values during compilation

Create a simple abstraction

As complex as it actually is.

Best Practice:Minimize HTTP Round Trips

Problem:Long StylesheetsHard to find your styles.

And I mean long... Seriously, this keeps going...

Solution:Concatenation &Partials

Partials: Just like with html templates, underscores denote apartial and can only be imported by other stylesheets.Convention: Each folder has a ﬁle of the same name thatimports the ﬁles contained within it in the correct order.

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

Sitewide Styles Forum Blog Articles DirectoryI T F L P F I A C S L Rn h o i o o n r o e i ed r r s s r d t m a s ve e m t t m e i m r t ix a x c e c i e d l n h n w e t g

Solution:Scoped Selectors

CSS gives youcarpal tunnelfrom typingyour scopesOVER &OVER AGAIN

Sass ProvidesDRY Selectorsvia nesting

Nested Selectors• Default: descendant• & - context reference• Works with combinatorsCo mp ile st o

Problem:Dozens of ImagesSpriting is annoying

Solution:Compass Sprites

gem “compass”Simple Sprites(Compass makesclasses for you) Or you can define your own selectors.

Problem:Dozens More Images

Solution:Use CSS3 InsteadAbstract vendor prefixes away

gem “compass”

Best Practice:Use a CDN / Asset HostsLoad assets faster

Problem:Image URLs Change

Solution:Use URL HelpersJust like in Rails

o st ile mpCo

Best Practice:Separate Content & Presentation

Problem:Classitis

Solution:Move Presentation ConcernsThey belong in your stylesheets

This is all you should need.

o st ile mp Co+ Mixins

MixinsCreate a design vocabularyof common patterns independentfrom your markups selectordomain

More Mixins + Compiles to

This is all you should need.

Compiles toSelector Inheritance

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

My TeammatesLead Developer of SassNathan Wiezenbaum (@nex3)The Compass Core TeamEric Meyer (@eriiicam)Brandon Mathis (@imathis)Scott Davis (@jetviper21)Nico Hagenburger (@hagenburger)

Compass is CharitywareIf 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

http://en.oreilly.com	173
http://krzychukula.blogspot.com	11
http://static.slidesharecdn.com	8
http://mezura.com.br	7
https://twitter.com	2
http://localhost:14002	2
http://dev.gobundlr.com	1
http://twitter.com	1

Sass: The Future of Stylesheets

by chriseppstein on May 18, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 205

Statistics

Sass: The Future of Stylesheets — Presentation Transcript