SASS: The Next Wave in Styling and Theming

Authoring StylesheetsWith Sass and Compass

Monday, November 29, 2010

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

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

Follow@chriseppstein


http://www.caring.com/


















































































































































































































































http://twitter.com/chriseppstein

http://twitter.com/chriseppstein

Sencha Touch Uses Sass & Compass


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

Stylesheets have grown up.


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


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


CSS3More SophisticatedMore PowerfulMore Complex


CSS3More SophisticatedMore PowerfulMore Complex

No new Syntax To Manage Complexity.


Sass & CompassA workhorse for CSS developers.

Simplifying CSS Using Abstractions.


What is Sass?What is Compass?


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


Sass Syntax

Sass CSS


Sass: Variables

Sass CSS


Sass: Nested Rules

Sass CSS


Sass: Mixins

Sass CSS


Mixins: Write Your Own


Sass: Selector Inheritance

Sass CSS


Sass: Colors

Sass CSS


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




Sass: Mathematical Expressions

Sass CSS


Sass: Numeric Units •Handles any unit

•Allows complex units in intermediate forms

•Understands compatible units

Examples


Sass: Conditionals


Sass: Server Side Imports

_sidebar.scss

screen.scss screen.cssMonday, November 29, 2010

Sass: Output Formats

Nested Expanded

Compact

Compressed


Sass: Alternate Syntax


Sass: Alternate Syntax


Questions about Sass?

?Monday, November 29, 2010

CSS is 14 years OldWe’ve developed Some Best Practices

OOCSS


CSS FrameworksA Codification of Best Practices

OOCSS


CompassA Real Stylesheet Framework

OOCSSNot Frameworks


CompassA Stylesheet Authoring Framework

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


Project ContextCreate a new project in seconds

compass create <project> --using <framework>


Compass will Watch for changes and compile automatically

compass watch

Project Context


Self documenting

compass help

If you need Help


If you need HelpOnline Documentation


http://compass-style.org/



If you need HelpThe Community

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


http://groups.google.com/group/compass-users

http://groups.google.com/group/compass-users

http://groups.google.com/group/haml

http://groups.google.com/group/haml

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


Where are your Assets?

assets.scss


Relative Assets:No Web Server Required

assets.scss

assets.css

config.rb


Absolute Assets:Web Server Required

assets.scss

assets.css

config.rb


Set an ApplicationPath Context

assets.scss

assets.css

config.rb


Image Host(CDN/S3/etc)

assets.scss

assets.css

config.rb


Use Asset Hosts

assets.scss

assets.css

config.rb


In your CSS?!

Wikipedia Reference Compass DocumentationMonday, November 29, 2010

http://en.wikipedia.org/wiki/Data_URI_scheme

http://en.wikipedia.org/wiki/Data_URI_scheme

http://compass-style.org/docs/reference/compass/helpers/inline-data/

http://compass-style.org/docs/reference/compass/helpers/inline-data/

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/






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

Vendor prefix hellIncompatible syntaxesGraceful degradation / progressive enhancement considerationsBuggy implementations


Prefix Hell

Really?Who does this?

What a Pain.

Simple.Like it Will Be.

Only now.Monday, November 29, 2010

Incompatible Implementations

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






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




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/




Mixin LibraryA La CarteCustomizable


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



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


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

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

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


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/


http://natbat.net/2008/Sep/28/css-systems/

http://natbat.net/2008/Sep/28/css-systems/



Lemonade - Sprite Generator960.gs - The 960 grid system ported to SassLightboxes - Pure CSS lightboxesSlideshows - Pure CSS slideshowsFancy Buttons - Pure CSS ButtonGenerator

Some Great Extensions

Building an Extension is EASY!


http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html

http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html

http://github.com/chriseppstein/compass-960-plugin

http://github.com/chriseppstein/compass-960-plugin

http://github.com/ericam/compass-css-lightbox

http://github.com/ericam/compass-css-lightbox

http://github.com/ericam/compass-css-slideshow

http://github.com/ericam/compass-css-slideshow

http://github.com/imathis/fancy-buttons

http://github.com/imathis/fancy-buttons

http://chriseppstein.github.com/blog/2010/10/21/compass-extensions-are-easy/

http://chriseppstein.github.com/blog/2010/10/21/compass-extensions-are-easy/

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


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


http://umdf.org/compass

http://umdf.org/compass

Questions about Compass?

?Monday, November 29, 2010

Photo Creditshttp://www.flickr.com/photos/mistressb/3961765594/

http://www.flickr.com/photos/katietegtmeyer/68401475/

http://www.flickr.com/photos/empics/2846078511/

http://www.flickr.com/photos/7202153@N03/3361299763/

http://www.flickr.com/photos/euart/282104427/


http://www.flickr.com/photos/mistressb/3961765594/

http://www.flickr.com/photos/mistressb/3961765594/









Similar ProjectsLess (Ruby, Javascript)CSSca!old (PHP)Turbine (PHP)xCSS (PHP)CleverCSS (Python)Mechanical CSS (PHP)HSS (Neko)


http://lesscss.org/

http://lesscss.org/

http://github.com/anthonyshort/Scaffold

http://github.com/anthonyshort/Scaffold

http://turbine.peterkroener.de/

http://turbine.peterkroener.de/

http://xcss.antpaw.org/

http://xcss.antpaw.org/

http://sandbox.pocoo.org/clevercss/

http://sandbox.pocoo.org/clevercss/

http://github.com/stuartloxton/Mechanical-CSS

http://github.com/stuartloxton/Mechanical-CSS

Technology

SASS: The Next Wave in Styling and Theming