Download - Ruby Con Ftw

7/30/2019 Ruby Con Ftw

1/92

Sass.The Future of Stylesheets

Without the Wait


2/92

Chris EppsteinBlog - http://chriseppstein.github.com

Follow me - @chriseppstein, +chriseppsteinArchitect - Caring.comCreator - Compass Stylesheet FrameworkCore Contributor - Sass
http://gplus.to/chriseppsteinhttp://gplus.to/chriseppsteinhttp://twitter.com/chriseppsteinhttp://twitter.com/chriseppsteinhttp://chriseppstein.github.com/http://chriseppstein.github.com/


3/92

A website forcaregivers of the sick and elderly.

The right information at just the right time


4/92

Books:Sass & Compass In Actionhttp://www.manning.com/netherland/DISCOUNT CODE: sass40 (save 40%)

Pragmatic Guide to Sasshttp://pragprog.com/book/pg_sass/pragmatic-guide-to-sassDISCOUNT CODE: SassCompass2011 (save 25%)
http://pragprog.com/book/pg_sass/pragmatic-guide-to-sasshttp://pragprog.com/book/pg_sass/pragmatic-guide-to-sasshttp://www.manning.com/netherland/http://www.manning.com/netherland/


5/92

Today


6/92

RationaleWhy does Sass exist?

What problems does it solve?


7/92

SyntaxWhat does Sass provide?


8/92

Best PracticesTips, tricks & pitfalls


9/92

Questions?Please ask them.


10/92

What is Sass?Syntactically Awesome StyleSheets


11/92

What is CSS? Originated in Academia

14 Years Old

Three Primitives:

SelectorsProperties

Values


12/92

CSS is Pretty.Pretty dumb.


13/92

Neverin the history ofsoftware havedevelopers been

asked to do so muchwith so little.


14/92

Browsers & Versions


15/92

Multiple Form FactorsDesktop, Mobile, Print...


16/92

Dozens of Templates


17/92

Experiment & Test


18/92

Maintain Consistency


19/92

Performant


20/92

Due Yesterday


21/92

New Hotness: CSS333 New Selectors120+ New Properties3 New @-rules

Enhanced Media Queries


22/92

CSS3No new syntax*

* Yet.


23/92


24/92

CSS was designed for theMythical Designerwho is too stupid to

understand High School Algebra.


25/92

If you want to makesomething simple for

beginners...


26/92

...make it powerfulenough for the experts

to create that simplicity.


27/92

But...


28/92

There is an alternative.


29/92

What is Sass? Born from Real World Experience

Brings Software DevelopmentMethodologies to Stylesheets:

Reusable, distributable libraries

DRY

Define abstractions

Adhere to architectural boundaries


30/92

What is Sass?New Primitives: Variables

Mixins

SelectorInheritance

Calculations

Functions

Conditionals Loops


31/92

What is Sass?Its what CSS would have been if we hadknown then what we know now:

Most stylesheets are written bydevelopers.


32/92

Problem:CSS StylesheetsAre hard to maintain


33/92

Dont

RepeatYourself

(I dont have to tell you this -- Its not like you want to)


34/92

A single change.A single edit.

A single compile.


35/92

We have machines.Let them do the busy work.


36/92

Problem:Same ColorMany Representations


37/92

Problem:Same ColorDifferent Reasons


38/92


39/92

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)


40/92

Solution:VariablesThe most requested CSS enhancement


41/92

Use variables anywhere a value is allowed.


42/92


43/92

Problem:Magic ValuesLost knowledge


44/92

Deceptively Complex


45/92

Solution:TransformationsDerive values during compilation


46/92

As complex as it actually is.


47/92

Sass Color Functions

mix(red, blue, 40%) => #660099

lighten(red, 10%) => #ff3333

darken(red, 10%) => #cc0000

desaturate(red, 10%) => #f20d0dsaturate(#511, 10%) => #5a0c0c

transparentize(red, 0.25) => rgba(255, 0, 0, 0.75)

opacify(red, 0.25) => rgba(255, 0, 0, 0.75)

grayscale(red) => #808080

complement(red) => #00ffff

Theres more on the Sass website.
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.htmlhttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.htmlhttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.html


48/92

Solution:Make Reusable CalculationsWe call these things functions


49/92


50/92

Deceptively Complex


51/92

Solution:

Abstractions &CalculationsDerive values during compilation


52/92

Create a simple abstraction


53/92

As complex as it actually is.


54/92

Best Practice:Minimize HTTP Round Trips


55/92

Problem:Long StylesheetsHard to find your styles.


56/92

And I mean long...

Seriously, this keeps going...


57/92

Solution:

Concatenation &Partials


58/92

Convention: Each folder has a file of the same name thatimports 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.
http://livepage.apple.com/http://livepage.apple.com/http://livepage.apple.com/http://livepage.apple.com/


59/92

Problem:Shared StylesheetsStyles leak into places you didnt intend


60/92

Sitewide Styles

Forum Blog Articles Directory

I

n

d

ex

T

h

r

ea

d

F

o

r

m

L

i

s

t

P

o

s

t

F

o

r

m

I

n

d

ex

A

r

t

ic

l

e

C

o

m

me

n

t

S

e

a

rc

h

L

i

s

ti

n

g

R

e

v

ie

w


61/92

Solution:Scoped Selectors


62/92

CSS gives youcarpal tunnelfrom typingyour scopesOVER & OVERAGAIN


63/92

Sass ProvidesDRY Selectorsvia nesting


64/92

Nested Selectors

Com

pilesto

Default: descendant

& - context reference

Works with combinators


65/92

Problem:Dozens of ImagesSpriting is annoying


66/92

Solution:Compass Sprites


67/92

Simple Sprites(Compass makesclasses for you)

Or you can define yourown selectors.


68/92


69/92

Problem:Dozens More Images


70/92

Solution:Use CSS3 InsteadAbstract vendor prefixes away


71/92
http://compass-style.org/reference/compass/css3/http://compass-style.org/reference/compass/css3/http://compass-style.org/reference/compass/css3/


72/92


73/92


74/92

Best Practice:Use a CDN / Asset HostsLoad assets faster


75/92

Problem:Image URLs Change


76/92

Solution:Use URL Helpers


77/92

Com

pilesto


78/92

Separate Content & Presentation

Best Practice:


79/92

Problem:Classitis


80/92


81/92

Solution:Move Presentation ConcernsThey belong in your stylesheets


82/92

This is all you should need.


83/92

Com

pilesto

+

Mixins


84/92

MixinsCreate a design vocabulary

of common patterns independentfrom your markup's selectordomain


85/92

More Mixins

+

Compiles to


86/92

More Mixins

+

Compiles to


87/92

More Mixins

+

Compiles to


88/92

This is all you should need.


89/92

Compiles to

Selector Inheritance


90/92

Weve OnlyScratched the Surfacehttp://sass-lang.com

http://compass-style.org
http://sass-lang.com/http://compass-style.org/http://compass-style.org/http://sass-lang.com/http://sass-lang.com/


91/92

My Teammates

Sass Core TeamNathan Wiezenbaum (@nex3)Hampton Catlin (@hcatlin)

The Compass Core TeamEric Meyer (@eriiicam)

Brandon Mathis (@imathis)Scott Davis (@jetviper21)Nico Hagenburger (@hagenburger)
http://twitter.com/hagenburgerhttp://twitter.com/jetviper21http://twitter.com/eriiicamhttp://twitter.com/hcatlinhttp://twitter.com/nex3http://twitter.com/hagenburgerhttp://twitter.com/hagenburgerhttp://twitter.com/jetviper21http://twitter.com/jetviper21http://twitter.com/imathishttp://twitter.com/imathishttp://twitter.com/eriiicamhttp://twitter.com/eriiicamhttp://twitter.com/hcatlinhttp://twitter.com/hcatlinhttp://twitter.com/nex3http://twitter.com/nex3


92/92

Compass is Charityware

If you use Compass and it makes your life better, please helpmake someone elses life better by making a tax-deductible

donation to the United Mitochondrial Disease Foundation.http://umdf.org/compass
http://umdf.org/compasshttp://umdf.org/compass