Top Banner
Authoring Stylesheets With Sass and Compass Monday, November 29, 2010
60
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: SASS: The Next Wave in Styling and Theming

Authoring StylesheetsWith Sass and Compass

Monday, November 29, 2010

Page 2: SASS: The Next Wave in Styling and Theming

Chris EppsteinSoftware Architect for Caring.comCreator of CompassMember of Sass Core Team

You’re there for them. We’re here for you.

Follow@chriseppstein

Monday, November 29, 2010

Page 3: SASS: The Next Wave in Styling and Theming

Sencha Touch Uses Sass & Compass

Monday, November 29, 2010

Page 4: SASS: The Next Wave in Styling and Theming

Hold on to Your HatWe’ve got a lot to learn.

Stylesheets have grown up.

Monday, November 29, 2010

Page 5: SASS: The Next Wave in Styling and Theming

Today•Learn the Sass Syntax and features•Learn your way around a Compass project•Overview of Compass Libraries•Style a webpage in minutes•Discover a new approach to design

Monday, November 29, 2010

Page 6: SASS: The Next Wave in Styling and Theming

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

Monday, November 29, 2010

Page 7: SASS: The Next Wave in Styling and Theming

CSS3More SophisticatedMore PowerfulMore Complex

Monday, November 29, 2010

Page 8: SASS: The Next Wave in Styling and Theming

CSS3More SophisticatedMore PowerfulMore Complex

No new Syntax To Manage Complexity.

Monday, November 29, 2010

Page 9: SASS: The Next Wave in Styling and Theming

Sass & CompassA workhorse for CSS developers.

Simplifying CSS Using Abstractions.

Monday, November 29, 2010

Page 10: SASS: The Next Wave in Styling and Theming

What is Sass?What is Compass?

Monday, November 29, 2010

Page 11: SASS: The Next Wave in Styling and Theming

Sass Features• Variables• Nested Rules• Mixins• Selector Inheritance• Colors• Math• Conditionals• Server-side Imports• Output Formatting & Compression• Silent Comments• Optional Whitespace- Aware Syntax

Monday, November 29, 2010

Page 12: SASS: The Next Wave in Styling and Theming

Sass Syntax

Sass CSS

Monday, November 29, 2010

Page 13: SASS: The Next Wave in Styling and Theming

Sass: Variables

Sass CSS

Monday, November 29, 2010

Page 14: SASS: The Next Wave in Styling and Theming

Sass: Nested Rules

Sass CSS

Monday, November 29, 2010

Page 15: SASS: The Next Wave in Styling and Theming

Sass: Mixins

Sass CSS

Monday, November 29, 2010

Page 16: SASS: The Next Wave in Styling and Theming

Mixins: Write Your Own

Monday, November 29, 2010

Page 17: SASS: The Next Wave in Styling and Theming

Sass: Selector Inheritance

Sass CSS

Monday, November 29, 2010

Page 18: SASS: The Next Wave in Styling and Theming

Sass: Colors

Sass CSS

Monday, November 29, 2010

Page 19: SASS: The Next Wave in Styling and Theming

Sass: Colors • mix

• darken/lighten

• transparentize/opacify

• compliment/adjust-hue

• saturate/desaturate/grayscale

• accessors & more

Functions

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

• hex

• rgb() / rgba()

• hsl() / hsla()

• Named Colors

Representations

Monday, November 29, 2010

Page 20: SASS: The Next Wave in Styling and Theming

Sass: Mathematical Expressions

Sass CSS

Monday, November 29, 2010

Page 21: SASS: The Next Wave in Styling and Theming

Sass: Numeric Units •Handles any unit

•Allows complex units in intermediate forms

•Understands compatible units

Examples

Monday, November 29, 2010

Page 22: SASS: The Next Wave in Styling and Theming

Sass: Conditionals

Monday, November 29, 2010

Page 23: SASS: The Next Wave in Styling and Theming

Sass: Server Side Imports

_sidebar.scss

screen.scss screen.cssMonday, November 29, 2010

Page 24: SASS: The Next Wave in Styling and Theming

Sass: Output Formats

Nested Expanded

Compact

Compressed

Monday, November 29, 2010

Page 25: SASS: The Next Wave in Styling and Theming

Sass: Alternate Syntax

Monday, November 29, 2010

Page 26: SASS: The Next Wave in Styling and Theming

Sass: Alternate Syntax

Monday, November 29, 2010

Page 27: SASS: The Next Wave in Styling and Theming

Questions about Sass?

?Monday, November 29, 2010

Page 28: SASS: The Next Wave in Styling and Theming

CSS is 14 years OldWe’ve developed Some Best Practices

OOCSS

Monday, November 29, 2010

Page 29: SASS: The Next Wave in Styling and Theming

CSS FrameworksA Codification of Best Practices

OOCSS

Monday, November 29, 2010

Page 30: SASS: The Next Wave in Styling and Theming

CompassA Real Stylesheet Framework

OOCSSNot Frameworks

Monday, November 29, 2010

Page 31: SASS: The Next Wave in Styling and Theming

CompassA Stylesheet Authoring Framework

• Project Context• Core Library• Semantic Frameworks• Extensions• Community

Monday, November 29, 2010

Page 32: SASS: The Next Wave in Styling and Theming

Project ContextCreate a new project in seconds

compass create <project> --using <framework>

Monday, November 29, 2010

Page 33: SASS: The Next Wave in Styling and Theming

Compass will Watch for changes and compile automatically

compass watch

Project Context

Monday, November 29, 2010

Page 34: SASS: The Next Wave in Styling and Theming

Self documenting

compass help

If you need Help

Monday, November 29, 2010

Page 35: SASS: The Next Wave in Styling and Theming

If you need HelpOnline Documentation

Monday, November 29, 2010

Page 36: SASS: The Next Wave in Styling and Theming

If you need HelpThe Community

http://groups.google.com/group/compass-usershttp://groups.google.com/group/haml

Monday, November 29, 2010

Page 37: SASS: The Next Wave in Styling and Theming

Projects are more than just Stylesheets•Images•Fonts•JavaScripts

Monday, November 29, 2010

Page 38: SASS: The Next Wave in Styling and Theming

Where are your Assets?

assets.scss

Monday, November 29, 2010

Page 39: SASS: The Next Wave in Styling and Theming

Relative Assets:No Web Server Required

assets.scss

assets.css

config.rb

Monday, November 29, 2010

Page 40: SASS: The Next Wave in Styling and Theming

Absolute Assets:Web Server Required

assets.scss

assets.css

config.rb

Monday, November 29, 2010

Page 41: SASS: The Next Wave in Styling and Theming

Set an ApplicationPath Context

assets.scss

assets.css

config.rb

Monday, November 29, 2010

Page 42: SASS: The Next Wave in Styling and Theming

Image Host(CDN/S3/etc)

assets.scss

assets.css

config.rb

Monday, November 29, 2010

Page 43: SASS: The Next Wave in Styling and Theming

Use Asset Hosts

assets.scss

assets.css

config.rb

Monday, November 29, 2010

Page 45: SASS: The Next Wave in Styling and Theming

Asset Helpers

stylesheet-url - url to assets stored in the CSS directoryfont-url - url to assets in the font directoryimage-url - url to assets in the images directoryinline-image - embed an imageinline-font-files - embed a font file

http://compass-style.org/docs/reference/compass/helpers/urls/

Monday, November 29, 2010

Page 46: SASS: The Next Wave in Styling and Theming

CSS3It’s pretty cool.But it’s still a work in progress:

Vendor prefix hellIncompatible syntaxesGraceful degradation / progressive enhancement considerationsBuggy implementations

Monday, November 29, 2010

Page 47: SASS: The Next Wave in Styling and Theming

Prefix Hell

Really?Who does this?

What a Pain.

Simple.Like it Will Be.

Only now.Monday, November 29, 2010

Page 49: SASS: The Next Wave in Styling and Theming

Compass CSS3 Modules

Background ClipBackground OriginBackground SizeBorder RadiusBoxBox ShadowBox SizingColumns

Font FaceGradientInline BlockOpacityText ShadowTransformTransition

http://compass-style.org/docs/reference/compass/css3/

Updated for you as browsers develop

Monday, November 29, 2010

Page 50: SASS: The Next Wave in Styling and Theming

Compass UtilitiesResetsSticky FooterClearfixCross browser best practices: floats, minsLinks: hover-link, link-colors, unstyled-linkLists: pretty bullets, no-bullets, horizontal lists, inline listsSpritesTables: striping borders & basic stylingText: ellipsis, no-wrap, text-replacement

http://compass-style.org/docs/reference/compass/utilities/

Monday, November 29, 2010

Page 52: SASS: The Next Wave in Styling and Theming

Browser SupportAll Modern BrowsersFirefox 2IE6 & 7Exceptions are noted in the docs.Compass ♥’s progressive enhancement

Monday, November 29, 2010

Page 53: SASS: The Next Wave in Styling and Theming

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

Monday, November 29, 2010

Page 54: SASS: The Next Wave in Styling and Theming

SusyCreated by an Eric Meyer for CompassUses Natalie Down’s CSS Systems approach to grids.Can be elastic, fixed, or fluid.Vertical RhythmUtilities

http://susy.oddbird.net/

Monday, November 29, 2010

Page 56: SASS: The Next Wave in Styling and Theming

My TeammatesNathan Wiezenbaum (@nex3) - Sass & HamlEric Meyer (@eriiicam) - Compass, SusyBrandon Mathis (@imathis) - Compass, Fancy Buttons

Monday, November 29, 2010

Page 57: SASS: The Next Wave in Styling and Theming

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

Monday, November 29, 2010

Page 58: SASS: The Next Wave in Styling and Theming

Questions about Compass?

?Monday, November 29, 2010