CSS frameworks allow for nested rules, variables, mixins, extends and imports to simplify stylesheet maintenance. Preprocessors like Sass compile CSS with additional features like nested selectors, variables, functions and mixins. Popular frameworks include Blueprint and Compass which provide tools and patterns for common tasks. Preprocessors increase abstraction and reduce duplication, improving organization and simplifying code.
17. 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
67. CSS2 selectors
*
E
.class
#id
E F
E > F
E + F
E[attribute]
E[attribute=value]
E[attribute|=value]
:first-child
:link
:visited
:lang()
:before
::before
:after
::after
:first-letter
:first-line
68. ... and even more stuff no browsers
supported until years later.
92. Variables
$gray: #333;
$default_border: 2px;
.user { background: $gray; border-size: $default_border;}
.owner { background: $gray; border-size: $default_border;}
and colo r mixing!
.admin { Ev e n ma t h !
background: $gray + #333;
border-size: $default_border + 2px;
}
95. Mixins
@mixin frame($padding_width: 2px, $border_color: #ddd) {
padding: $padding_width;
border: {
fines the mixin
de
width: 1px;
style: solid;
color $border_color;
}
}
.avatar {
ru le s
he
in t
@include frame;
es
mix
position: absolute;
top: 5px;
left: 5px;
}
p img { @include frame(1px, #ccc);}
99. Mixins
.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
102. Imports
@import "reset.scss" # _reset.scss
@import "typography" # _typography.scss
@import "layout.css" # url(layout.css)
Included at compile time -
just one http request
106. “It’s time to abolish all vendor prefixes.
They’ve become solutions for which there is no
problem, and they are actively harming web
standards.”
-Peter-Paul Koch aka @ppk
http:/
/www.quirksmode.org/blog/archives/2010/03/css_vendor_pref.html
108. Compass CSS3 mixins
@import "compass/css3.scss";
.callout {
@include border-radius(5px);
@include linear-gradient("left top", "left bottom", #fff, #ddd);
}
.callout {
-moz-border-radius: 5px;
very different syntax
-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));
}
109. “Well, reactions to my proposal to abolish
vendor prefixes are mixed, and I might have
overshot my target here.”
-Peter-Paul Koch aka @ppk
http:/
/www.quirksmode.org/blog/archives/2010/03/css_vendor_pref_1.html
127. 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,
}
v
ths for de
relative pa
production
PRODUCTION a bsolute for
#nav {
background: url("http://assets.example.com/images/nav_bg.png")
repeat-x top center;
}
133. Sass and Compass
$ sudo gem install haml
$ sudo gem install compass --pre
CALL IT FROM THE COMMAND LINE
$ sass --watch screen.scss
OR COMPASS-IZE YOUR PROJECT
$ compass --rails -f blueprint
OR WATCH A FOLDER
$ compass --watch
134. shameless plug
Compass and WordPress
$ sudo 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
141. Resources an d thanks for having me!
http://sass-lang.com
http://compass-style.org
http://compass-style.org/docs/
blog: wynnnetherland.com
twitter: @pengwynn
linkedin.com/in/netherland