WYNNNETHERLAND COMPASS, SASS, AND THE ENLIGHTENED WEB

whoami

+

No content

Native Oklahoman Naturalized Texan or “Okie” in the local vernacular.

Like you, I work on the Interwebs.

... but my story begins in

the DARK AGES

Literally. this still works : brew install lynx

gopher:// look it up, kids. anyone?

Flight of the Navigator technology from the future!

These were perilous times.

Full of strange magic.

Remember this? And this? Nested tables FTW.

JavaScript vs. JScript

No content

Sometimes we’d hide these and update the page without a refresh, back when Ajax was something Momma used to clean the bathtub.

DOM level 0.

document.formName.inputName

No content

Why am I sharing all this?

Consider it inoculation against CURMUDGEONRY.

THAT’S THE WAY IT WAS AND WE LIKED IT.

“GET OFF MY LAWN.” Nathan Smith Creator, 960.gs RefreshOKC headliner Reformed Curmudgeon

Back to our story

the RENAISSANCE

JavaScript Frameworks

CSS Frameworks

HTML5

CSS3

border-radius

border-image

www.zurb.com/playground/awesome-overlays

background-size

gradients

RGBA, HSL, HSLA colors rgba (0,0,0,1) is the new black!

text-shadow

box-shadow

word wrap

outline

columns

@font-face Typographic freedom! means

New selectors Cool

* E .class #id E F E > F E + F E[attribute] E[attribute=value] E[attribute~=value] E[attribute|=value] :first-child :link :visited :lang() :before ::before :after ::after :first-letter ::first-letter :first-line ::first-line E[attribute^=value] E[attribute$=value] E[attribute*=value] E ~ F :root :last-child :only-child :nth-child() :nth-last-child() :first-of-type :last-of-type :only-of-type :nth-of-type() :nth-last-of-type() :empty :not() :target :enabled :disabled :checked CSS3 selectors (and some golden oldies) :header Steal this from jQuery, please

This is not a talk about CSS Follow @smashingmag for your CSS tips & tricks

REAL stylesheet innovation I want to talk about

HOW we write stylesheets I want to talk about

how we MAINTAIN stylesheets I want to talk about

how we SIMPLIFY stylesheets I want to talk about

We're gonna see a brave new world where they run everybody a wire and hook us all up to a grid. Yes, sir, a veritable age of reason. Like the one they had in France. Not a moment too soon. ~ Ulysses Everett McGill

the AGE OF ENLIGHTENMENT

Sass

Syntax options

table.users { tr { td { background: #d1d1d; a { color: #111; } } } } Syntax options - SCSS Sassy CSS!

table.users tr td background: #d1d1d a color: #111 Syntax options - Indented I — whitespace

Nested rules

table.users tr td a {color: #111} table.users tr.alt td a {color: #333} Nested rules - selectors

table.users tr td a color: #111 td.alt a color: #333 Nested rules - selectors Look, Ma, no braces or semicolons But you can use both if you wanna

table.users tr td color: #111 &.alt color: #333 &:hover color: #666 Nested rules - selectors Change this ... and you change these

.users font: size: 1.2em style: italics weight: bold Nested rules - properties

Variables

.user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; } Variables

!gray = #333 !default_border = 2px .user background: = !gray border-size: = !default_border .owner background: = !gray border-size: = !default_border .admin background: = !gray + #333 border-size: = !default_border + 2px Variables Even math! and color mixing!

Variables $font-apres: Apres, Arial, sans-serif $dark-gray: #1e1e1e !default $body-text: #bbb !default $strong-text: lighten($body-text, 40%) $muted-text: darken($body-text, 40%) $content-background: #fff $content-text: #555 $content-border: #ccc $form-background: rgba(0, 0, 0, .5) $blue-primary: #6095c2 $blue-secondary: #1742db $green-primary: #64b900 $green-secondary: #298527 $pink-primary: #f44ab7

Mixins

.avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; } Mixins

=frame(!padding_width = 2px, !border_color = #ddd) padding = !padding_width border: width: 1px style: solid color = !border_color .avatar +frame position: absolute top: 5px left: 5px p img +frame(1px, #ccc) Mixins defines the mixin mixes in the rules

Selector inheritance

.flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } Selector inheritance

.flash padding: 5px border-width: 1px font-weight: bold .error.flash color: #8a1f11 background: #fbe3e4 .notice.flash color: #514721 background: #fff6bf Selector inheritance

.flash, .error, .notice { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } Selector inheritance now we can use a single class in our markup

Imports

@import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) Imports parent + 3 @imports = 4 http requests

@import reset.sass # _reset.sass @import typography.sass # _typography.sass @import layout.sass # _layout.sass Imports Included at compile time - just one http request

Imports + Mixins Now it gets fun!

@import compass/css3.sass .callout +border-radius(5px) +linear-gradient("left top", "left bottom", #fff, #ddd) .callout { -moz-border-radius: 5px; -webkit-border-radius: 5px; -border-radius: 5px; background-image: -moz-linear-gradient(top, bottom, from(#fff), to (#ddd)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #ddd)); } Compass CSS3 mixins very different syntax

css3/border_radius.sass css3/inline_block.sass css3/opacity.sass css3/text_shadow.sass css3/box_shadow.sass css3/columns.sass css3/box_sizing.sass css3/gradient.sass css3/background_clip.sass css3/background_origin.sass css3/background_size.sass css3/font_face.sass css3/transform.sass css3/transition.sass Compass CSS3 mixins

Bring your favorite CSS Framework

A Blueprint example boo

@import blueprint/reset.sass @import partials/base.sass @import blueprint @import blueprint/modules/scaffolding.sass #wrapper +container #content +column(7) +append(1) #featured +column(5, true) #sidebar +column(3, true) +prepend(1) A Blueprint example

Functions

Very. Powerful. Functions.

hue(#cc3) => 60deg saturation(#cc3) => 60% lightness(#cc3) => 50% adjust-hue(#cc3, 20deg) => #9c3 saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a329 grayscale(#cc3) => desaturate(#cc3, 100%) = #808080 complement(#cc3) => adjust-hue(#cc3, 180deg) = #33c mix(#cc3, #00f) => #e56619 mix(#cc3, #00f, 10%) => #f91405 mix(#cc3, #00f, 90%) => #d1b72d Sass 2.4 color functions http://nex-3.com/posts/89-powerful-color-manipulation-with-sass

mix(rgba(51, 255, 51, 0.75), #f00) => rgba(178, 95, 19, 0.875) mix(rgba(51, 255, 51, 0.90), #f00) => rgba(163, 114, 22, 0.95) alpha(rgba(51, 255, 51, 0.75)) => 0.75 opacity(rgba(51, 255, 51, 0.75)) => 0.75 opacify(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85) fade-in(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85) transparentize(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65) fade-out(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65) Sass 2.4 color functions with alpha support! http://nex-3.com/posts/89-powerful-color-manipulation-with-sass

Who makes this syntactic sugar?

Sass and Compass CSS extensions & compiler Patterns & plugins

...like peas and carrots.

$ sudo gem install haml $ sudo gem install compass --pre CALL IT FROM THE COMMAND LINE $ sass screen.sass screen.css OR COMPASS-IZE YOUR PROJECT $ compass --rails -f blueprint OR WATCH A FOLDER $ compass --watch Sass and Compass

A quick survey of Compass

Blueprint

Blueprint ★ Buttons ★ Colors ★ Debug ★ Fancy Type ★ Form ★ Grid ★ Interaction ★ Internet Explorer ★ Link Icons ★ Liquid ★ Print ★ Reset ★ Rtl ★ Scaffolding ★ Typography ★ Utilities

CSS3

CSS3 ★ Appearance ★ Background Clip ★ Background Origin ★ Background Size ★ Border Radius ★ Box ★ Box Shadow ★ Box Sizing ★ CSS3 Pie ★ Columns ★ Font Face ★ Gradient ★ Images ★ Inline Block ★ Opacity ★ Shared Utilities ★ Text Shadow ★ Transform ★ Transform (legacy) ★ Transition

Image sprites

@import "icon/*.png" .actions .new +icon-sprite(new) .edit +icon-sprite(edit) .save +icon-sprite(save) .delete +icon-sprite(delete) Image sprites .icon-sprite, .actions .new, .actions .edit, .actions .save, .actions .delete { background: url('/images/icon-34fe0604ab.png') no-repeat; } .actions .new { background-position: 0 -64px; } .actions .edit { background-position: 0 -32px; } .actions .save { background-position: 0 -96px; } .actions .delete { background-position: 0 0; } @import "icon/*.png" public/images/icon/new.png public/images/icon/edit.png public/images/icon/save.png public/images/icon/delete.png 1. 2. 3. I like the Sprite in you®

URL helpers

#nav background: image-url("nav_bg.png") repeat-x top center DEVELOPMENT #nav { background: url("/images/nav_bg.png") repeat-x top center; } PRODUCTION #nav { background: url("http://assets.example.com/images/nav_bg.png") repeat-x top center; } URL helpers relative paths for development, absolute for production

stylesheet-url($path) font-url($path) image-url($path) URL helpers

Share your patterns

http://brandonmathis.com/projects/fancy-buttons/

@import "fancy-buttons" button, a.button +fancy-button(#2966a8)

compass-960

$ninesixty-columns: 16 #wrap +grid-container #left-nav +alpha +grid(5) #main-content +grid-prefix(1) +grid(10) +omega Compass 960 https://github.com/chriseppstein/compass-960-plugin

compass-wordpress

$ gem install compass-wordpress CRANK OUT A NEW SASS-Y WORDPRESS THEME $ compass -r compass-wordpress \ -f wordpress -p thematic \ --sass-dir=sass --css-dir=css \ -s compressed my_awesome_theme AUTOCOMPILE YOUR CHANGES $ compass --watch Compass and WordPress shameless plug

compass-formalize Announcing!

No content

INSTALL THE GEM $ gem install compass_formalize CREATE THE COMPASS PROJECT $ compass create my-great-app -r compass_formalize $ cd my-great-app APPLY THE PATTERN $ compass install formalize/jquery Compass and Formalize

Stats

Stats | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- | | Filename | Rules | Properties | Mixins Defs | Mixins Used | CSS Rules | CSS Properties | | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- | | app/stylesheets/_960.sass | 198 | 141 | 0 | 0 | -- | -- | | app/stylesheets/_animation.sass | 2 | 2 | 0 | 0 | -- | -- | | app/stylesheets/application.sass | 268 | 607 | 0 | 33 | 1131 | 3684 | | app/stylesheets/_data_table.sass | 39 | 66 | 0 | 4 | -- | -- | | app/stylesheets/_datepicker.sass | 125 | 242 | 0 | 0 | -- | -- | | app/stylesheets/_formalize.sass | 82 | 78 | 0 | 4 | -- | -- | | app/stylesheets/_forms.sass | 227 | 242 | 0 | 21 | -- | -- | | app/stylesheets/ie.sass | 0 | 0 | 0 | 0 | 0 | 0 | | app/stylesheets/_jscrollpane.sass | 20 | 43 | 0 | 0 | -- | -- | | app/stylesheets/_prettify.sass | 16 | 16 | 0 | 0 | -- | -- | | app/stylesheets/print.sass | 0 | 0 | 0 | 0 | 0 | 0 | | app/stylesheets/_reset.sass | 111 | 18 | 0 | 0 | -- | -- | | app/stylesheets/_text.sass | 27 | 18 | 0 | 0 | -- | -- | | app/stylesheets/_tiptip.sass | 19 | 40 | 0 | 0 | -- | -- | | app/stylesheets/_util.sass | 56 | 54 | 0 | 0 | -- | -- | | app/stylesheets/_vars.sass | 0 | 6 | 2 | 0 | -- | -- | | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- | | Total (16 files): | 1190 | 1573 | 2 | 62 | 1131 | 3684 | | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |

Isn’t she Sassy, folks? GET THE BOOK.

sass40 Save 40% and get early access! Sadly, sass100 is not a valid code.

Resources sass-lang.com beta.compass-style.org wynn.fm/okc blog: wynnnetherland.com twitter: @pengwynn email: [email protected] linkedin.com/in/netherland and thanks for having me! grab the slides!