Download - Stylus: The Minimalist Preprocessor
StylusThe Minimalist Preprocessor
Offers all the robust, dynamic functionality
that LESS and Sass provide but with a pithy,
streamlined approach.
Unique Features
● Optional colons, semi-colons, braces
● Access properties within their own block
● Extend nested selectors
● Transparent mixins
Optional colons, semi-colons, braces
//So clean!
$base-color = #000
body
font 16px/24px Arial, sans-serif
background $base-color
Optional colons, semi-colons, braces
body {
font: 16px/24px Arial, sans-serif;
background: #000;
}
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)
Access Properties Within Their Own Block
#modal {
position: absolute;
width: 572px;
height: 386px;
top: 50%;
left: 50%;
margin-left: -286px;
margin-top: -193px;
}
Extend Nested Selectors
form
button
box-shadow 1px 0 1px #666
border-radius 3px
padding 10px
.button
@extend form buttoncolor #000
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}
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
Transparent Mixins.callout{width:100px;height:100px;background:-webkit-linear-gradient(top, #fff, #000);background:-moz-linear-gradient(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;-o-transition:border-radius 0.6s ease-in-out;-ms-transition:border-radius 0.6s ease-in-out;transition:border-radius 0.6s ease-in-out;}
.callout:hover{-webkit-border-radius:0;border-radius:0}
Syntax Differences from LESS & Sass
● Assign variables via the equals sign
● Extend-only placeholder selectors
● No property nesting
● Libraries
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
Extend-only placeholder selectors
$notice
font-weight bold
text-decoration underline
.error
@extend $noticepadding 10px
//Sass uses % instead of $
Property Nestingp
font:size: 14pxweight: bold
margin-bottom: 10px
//Outputs in Sass, but not Stylus
font-size: 14px
font-weight: bold
Libraries
clearlesslesshat
nib
Nib: powerful cross-browser CSS3 mixins
global-reset()
linear-gradient()
clearfix()
hide-text()
And more!
Use Stylus if...
● You prefer concise syntax
● Are comfortable with Jade and CoffeeScript
● Work in a node.js environment
Installation & Usage
● Node.js: npm install stylus
● Grunt: npm install grunt-contrib-
stylus
● Codekit Friendly!
● Play on Codepen.io!
Links & Resources
learnboost.github.io/stylus npmjs.org/package/grunt-contrib-stylusvisionmedia.github.io/nib/
bit.ly/19Np5p3bit.ly/1fxXXwm
