Compass, Sass, and the Enlightened CSS Developer

COMPASS, SASS, AND THE ENLIGHTENED WEB

WYNNNETHERLAND

or “Okie” in the local
Native Oklahoman vernacular.

Naturalized Texan

Like you, I work on the Interwebs.

Literally.

this still works :
brew install lynx

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

Flight of the Navigator

technology from the future!

<table>
<tr>
<td valign=top>Remember this?</td>
<td>
<table>
<tr>
<td>And this?</td>
</tr>
</table>
</td>
</tr>

Nested tables FTW.
</tr>
</table>

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

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

www.zurb.com/playground/awesome-overlays

RGBA, HSL, HSLA colors

rgba (0,0,0,1) is the new black!

@font-face
means

Typographic freedom!

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

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

I want to talk about

REAL stylesheet innovation


HOW we write stylesheets


how we MAINTAIN stylesheets


how we SIMPLIFY stylesheets

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

Syntax options - SCSS Sassy CSS!

table.users {
tr {
td {
background: #d1d1d;
a {
color: #111;
}
}
}
}

Syntax options - Indented I whitespace

table.users
tr
td
background: #d1d1d
a
color: #111

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

table.users tr.alt td a {color: #333}

table.users Lo o k , Ma,
tr n o braces
td
a
color: #111 or semicolons
td.alt
a
color: #333
But you can use
both if you wanna

table.users
tr
C ha nge this
td
color: #111
&.alt you chang e these
. . . an d
color: #333
&:hover
color: #666

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

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

r mixing!
background: = !gray
border-size: = !default_border and colo
.admin Ev e n ma t h !
background: = !gray + #333
border-size: = !default_border + 2px

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
defines t he mixin
style: solid
color = !border_color

.avatar
+frame
position: absolute
top: 5px
mixes in t h e rule s
left: 5px

p img
+frame(1px, #ccc)

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

.flash
padding: 5px
border-width: 1px
font-weight: bold

.error.flash
color: #8a1f11
background: #fbe3e4

.notice.flash
color: #514721
background: #fff6bf

.flash,
.error,
.notice { padding: 5px; border-width: 1px; font-weight: bold; }

.error { color: #8a1f11; background: #fbe3e4; }

.notice { color: #514721; background: #fff6bf; }

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)

parent + 3 @imports = 4 http requests

Imports
@import reset.sass # _reset.sass
@import typography.sass # _typography.sass
@import layout.sass # _layout.sass

Included at compile time -
just one http request

Imports + Mixins

Now it gets fun!

Compass CSS3 mixins
@import compass/css3.sass

.callout
+border-radius(5px)
+linear-gradient("left top", "left bottom", #fff, #ddd)

.callout { very different syntax
-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
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

Bring your favorite CSS Framework

A Blueprint example
<div id='wrapper' class="container">
<div id='content' class="span-7 prepend-1">
<div id='main' class="container">

boo
...
</div>
<div id='featured' class="span-5 last">
...
</div>
</div>
<div id='sidebar' class="span-3 append-1 last">
...
</div>
</div>

A Blueprint example
@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)

Sass 2.4 color 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

http://nex-3.com/posts/89-powerful-color-manipulation-with-sass

with alpha support!
Sass 2.4 color functions
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)

http://nex-3.com/posts/89-powerful-color-manipulation-with-sass

Who makes this syntactic sugar?

Patte
xtens io n s & rns &
C SS e plugins
co mpiler

Sass and Compass

Sass and Compass
$ 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

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

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

I like the Sprite in you
Image sprites ®

1.
@import "icon/*.png"
@import "icon/*.png"

.actions 2. public/images/icon/new.png
public/images/icon/edit.png
.new
public/images/icon/save.png
+icon-sprite(new)
public/images/icon/delete.png
.edit
+icon-sprite(edit)
.save .icon-sprite,
+icon-sprite(save) .actions .new,
.delete .actions .edit,
+icon-sprite(delete) .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; }

3.
.actions .delete { background-position: 0 0; }

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;
}

elopment,
ths for dev
relative pa
PRODUCTION production
a bsolute for
#nav {
background: url("http://assets.example.com/images/nav_bg.png")
repeat-x top center;
}

URL helpers
stylesheet-url($path)

font-url($path)

image-url($path)

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

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

shameless plug
Compass and 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 Formalize
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

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.

Save 40% and get early access!

sass40

Sadly, sass100 is not a valid code.

Resources an d thanks for having me!

sass-lang.com
beta.compass-style.org

slides!
wynn.fm/okc
gra b t he

blog: wynnnetherland.com
twitter: @pengwynn
email: wynn@hp.com

linkedin.com/in/netherland

Compass, Sass, and the Enlightened CSS Developer

Recommended

More Related Content

What's hot (20)

Similar to Compass, Sass, and the Enlightened CSS Developer (20)

More from Wynn Netherland (9)

Recently uploaded (20)

Compass, Sass, and the Enlightened CSS Developer