![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);
}](https://image.slidesharecdn.com/simplifyyourcsswithstylusandnib-110831212519-phpapp01/85/Simplify-your-CSS-with-Stylus-and-Nib-9-320.jpg)
Simplify your CSS with Stylus and Nib
- 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