Más contenido relacionado Similar a Simplify your CSS with Stylus and Nib (20) Simplify your CSS with Stylus and Nib2. The current state of CSS
#comments li {
background-color: #FEFEFE;
}
#comments .author {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
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
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;
}
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;
}
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