A brief overview of Stylus, a CSS preprocessor that focuses on brevity and robust functionality.

1. Stylus
The Minimalist Preprocessor

2. Offers all the robust, dynamic functionality
that LESS and Sass provide but with a pithy,
streamlined approach.

3. Unique Features
● Optional colons, semi-colons, braces
● Access properties within their own block
● Extend nested selectors
● Transparent mixins

4. Optional colons, semi-colons, braces
//So clean!
$base-color = #000
body
font 16px/24px Arial, sans-serif
background $base-color

5. Optional colons, semi-colons, braces
body {
font: 16px/24px Arial, sans-serif;
background: #000;
}

6. Access Properties Within Their Own Block
#modal
position absolute
width 572px
height 386px
top 50%
left 50%
margin-left -(@width/2)
margin-top -(@height/2)

7. Access Properties Within Their Own Block
#modal {
position: absolute;
width: 572px;
height: 386px;
top: 50%;
left: 50%;
margin-left: -286px;
margin-top: -193px;
}

8. Extend Nested Selectors
form
button
box-shadow 1px 0 1px #666
border-radius 3px
padding 10px
.button
@extend form button
color #000

9. Extend Nested Selectors
form button,.button{
-webkit-box-shadow:1px 0 1px #666;
box-shadow:1px 0 1px #666;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px
}
.button{color:#000}

10. Transparent Mixins
.callout
width 100px
height 100px
background linear-gradient(top,gray,black)
border-radius 20px
transition border-radius 0.6s ease-in-out
&:hover
border-radius 0

11. Transparent Mixins
.callout{width:100px;height:100px;background:-webkitlinear-gradient(top, #fff, #000);background:-moz-lineargradient(top, #888, #000);background:-o-linear-gradient
(top, #888, #000);background:-ms-linear-gradient(top,
#888, #000);background:linear-gradient(to bottom, #888,
#000);-webkit-transition:border-radius 0.6s ease-in-out;
-moz-transition:border-radius 0.6s ease-in-out;-otransition:border-radius 0.6s ease-in-out;-mstransition:border-radius 0.6s ease-in-out;transition:
border-radius 0.6s ease-in-out;}
.callout:hover{-webkit-border-radius:0;border-radius:0}

12. Syntax Differences from LESS & Sass
● Assign variables via the equals sign
● Extend-only placeholder selectors
● No property nesting
● Libraries

13. Assign variables via the equals sign
//$ is optional, but recommended
primary-color = #999
$secondary-color = #666
//In Sass, the $ is mandatory. See below.
$primary-color: #999

14. Extend-only placeholder selectors
$notice
font-weight bold
text-decoration underline
.error
@extend $notice
padding 10px
//Sass uses % instead of $

15. Property Nesting
p
font:
size: 14px
weight: bold
margin-bottom: 10px
//Outputs in Sass, but not Stylus
font-size: 14px
font-weight: bold

16. Libraries
clearless
lesshat
nib

17. Nib: powerful cross-browser CSS3 mixins
global-reset()
linear-gradient()
clearfix()
hide-text()
And more!

18. Use Stylus if...
● You prefer concise syntax
● Are comfortable with Jade and CoffeeScript
● Work in a node.js environment

19. Installation & Usage
● Node.js: npm install stylus
● Grunt: npm install grunt-contribstylus
● Codekit Friendly!
● Play on Codepen.io!

20. Links & Resources
learnboost.github.io/stylus
npmjs.org/package/grunt-contrib-stylus
visionmedia.github.io/nib/
bit.ly/19Np5p3
bit.ly/1fxXXwm