47. 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
48. This is not a talk about CSS
Follow @smashingmag for your CSS tips & tricks
49. I want to talk about
REAL stylesheet innovation
51. I want to talk about
how we MAINTAIN stylesheets
52. I want to talk about
how we SIMPLIFY stylesheets
53. 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
60. Nested rules - selectors
table.users tr td a {color: #111}
table.users tr.alt td a {color: #333}
61. Nested rules - selectors
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
62. Nested rules - selectors
table.users
tr
C ha nge this
td
color: #111
&.alt you chang e these
. . . an d
color: #333
&:hover
color: #666
70. 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)
74. Selector inheritance
.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
77. Imports
@import reset.sass # _reset.sass
@import typography.sass # _typography.sass
@import layout.sass # _layout.sass
Included at compile time -
just one http request
91. 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
100. 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;
}
115. Save 40% and get early access!
sass40
Sadly, sass100 is not a valid code.
116. 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