sass. - o'reilly mediaassets.en.oreilly.com/1/event/59/sass_ the future of stylesheets... ·...
TRANSCRIPT
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