Stylus is a CSS preprocessor that aims to simplify CSS by removing syntactic sugar like brackets and semicolons, enforcing indentation, and allowing variables, mixins, and nested selectors. Nib is a library of mixins, utilities, and components for Stylus that handles vendor prefixes and provides things like clearfixes and hiding text. Together, Stylus and Nib allow for more concise and maintainable CSS code.

1. Simplify your CSS
with Stylus and Nib
Christian Joudrey - @cjoudrey

2. The current state of CSS
#comments li {
background-color: #FEFEFE;
}
#comments .author {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

3. Stylus
“Expressive, robust, feature-rich CSS language
built for nodejs”

4. Main differences
• Get rid of syntactic sugar (brackets, semi-colons, colons)
• Enforced indentation
• Don't repeat yourself (DRY)
body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px

5. Variables
$font-size = 14px
body
font $font-size Helvetica, Arial, sans-serif

6. Mixins
body
font 12px Helvetica, Arial, sans-serif
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
a.button
border-radius 5px

7. Nested selectors
#comments #comments h1 {
h1 font-size: 14px;
font-size 14px }
a
color black #comments a {
color: black;
&:hover }
color blue
#comments a:hover {
color: blue;
}

8. Nib
“Stylus mixins, utilities, components, and
gradient image generation. CSS is your bitch!”

9. Vendor prefixes
@import 'nib' #comments {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
#comments border-radius: 4px;
border-radius 4px -webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow 0 0 1px black box-shadow: 0 0 1px #000;
p }
opacity 0.75
#comments p {
opacity: 0.75;
filter: progid:DXIm[...]pha(Opacity=75);
}

10. Clearfix
@import 'nib' .cf {
zoom: 1;
.cf }
clearfix() .cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}

11. Hide-text
@import 'nib' #slogan {
text-indent: -99999em;
#slogan overflow: hidden;
hide-text() text-align: left;
}

12. and a lot more...

13. The best part is...
• It's all optional, you can mix and match Stylus and CSS
• Slowly integrate it in your existing CSS
@import 'nib'
#comments {
border-radius: 4px;
border: 1px solid black;
}

14. Express Middleware
var express = require('express'),
stylus = require('stylus'),
nib = require('nib'),
app = express.createServer();
// ...
app.use(stylus.middleware({
src: __dirname + '/public',
compile: function (str, path){
return stylus(str)
.set('filename', path)
.set('compress', true)
.use(nib());
}
}));

15. Command-line Tool
$ npm install -g stylus
$ stylus main.styl
compiled main.css
$ stylus -u nib main.styl
compiled main.css

16. Interesting Links
• Stylus: http://learnboost.github.com/stylus
• Nib: https://github.com/visionmedia/nib