- CSS3 is Awesome
- WCBOS 2011: Boaz Sender, Exploding Your WordPress Theme with CSS3 (video)
- Tomorrow, 2pm: George Stephanis, Updating “Kubrick” to CSS3/HTML5
- CSS3 doesn't change the structure of CSS
- Pre-processors created to help manage stylesheets
- "Syntactically Awesome StyleSheets"
- Born from Haml
- Terse syntax, very different from CSS:
$blue: #3bbfce
.content-navigation
border-color: $blue
color: darken($blue, 9%)
- "Meta-language": CSS is valid LESS by default
- Originally in Ruby, now uses JavaScript
- Runs in the browser or on the command line with Node.js
- LESS Homepage
- LESS on Github
@blue: #3bbfce;
.content-navigation {
border-color: @blue;
color: darken(@blue, 9%);
}
- "Sassy CSS" (SCSS) syntax introduced in v3 to make syntax a meta-set of CSS
- Sass Homepage
- Sass on Github
$blue: #3bbfce;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
- Terse syntax: colons, semi-colons, brackets all optional
- Runs on Node.js
- (Stylus syntax comparison)
- Stylus Homepage
- Stylus on Github
blue = #3bbfce
.content-navigation
border-color blue
color darken(blue, 30%)
.widget {
span {
color: #14ff23;
font-style: italic;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
compiles to:
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
@text-size: 16px;
h1 {
font-size: @text-size * 2;
}
h1 {
font-size: 32px;
}
.widget {
background-color: #444;
color: #00ff00;
font-family: monospace;
}
.error-widget {
@extend .widget
color: #ff0000;
}
compiles to
.widget,
.error-widget {
background-color: #444;
color: #00ff00;
font-family: monospace;
}
.error-widget {
color: #ff0000;
}
(If you want this in LESS, add a +1 on the pull request!)
- Mature technology
- Architecture (structure)
- Maintenance
- PHP -> HTML :: LESS -> CSS
- Workflow-agnostic
- Command-line via Ruby or Node.js
- Server-side via ports to PHP, .NET, etc
- Browser-side (LESS only) via JavaScript
- SCSS
- LESS
- Twitter Bootstrap toolkit
- lessphp PHP port of LESS—introduces ways to integrate with WordPress
- wp-less by Thomas Parisot (@CyneticMonkey)
- Integrating LESSphp into WordPress (in French) by Baptiste Caquot (@baptwit)
- dotless .NET port of LESS
- Used in the SquishIt library by Justin Etheredge (@JustinEtheredge)
- Stylus
- ???