Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Stylus
The 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 selector...
Optional colons, semi-colons, braces
//So clean!
$base-color = #000
body
font 16px/24px Arial, sans-serif
background $base...
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 -(...
Access Properties Within Their Own Block
#modal {
position: absolute;
width: 572px;
height: 386px;
top: 50%;
left: 50%;
ma...
Extend Nested Selectors
form
button
box-shadow 1px 0 1px #666
border-radius 3px
padding 10px
.button
@extend form button
c...
Extend Nested Selectors
form button,.button{
-webkit-box-shadow:1px 0 1px #666;
box-shadow:1px 0 1px #666;
-webkit-border-...
Transparent Mixins
.callout
width 100px
height 100px
background linear-gradient(top,gray,black)
border-radius 20px
transit...
Transparent Mixins
.callout{width:100px;height:100px;background:-webkitlinear-gradient(top, #fff, #000);background:-moz-li...
Syntax Differences from LESS & Sass
● Assign variables via the equals sign
● Extend-only placeholder selectors
● No proper...
Assign variables via the equals sign
//$ is optional, but recommended
primary-color = #999
$secondary-color = #666
//In Sa...
Extend-only placeholder selectors
$notice
font-weight bold
text-decoration underline
.error
@extend $notice
padding 10px
/...
Property Nesting
p
font:
size: 14px
weight: bold
margin-bottom: 10px
//Outputs in Sass, but not Stylus
font-size: 14px
fon...
Libraries

clearless
lesshat

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-contribstylus
● Codekit Friendly!
● Play on ...
Links & Resources
learnboost.github.io/stylus
npmjs.org/package/grunt-contrib-stylus
visionmedia.github.io/nib/
bit.ly/19N...
Upcoming SlideShare
Loading in …5
×

Stylus: The Minimalist Preprocessor

2,892 views

Published on

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

Published in: Design, Technology, Education
  • Be the first to comment

Stylus: The Minimalist Preprocessor

  1. 1. Stylus The Minimalist Preprocessor
  2. 2. Offers all the robust, dynamic functionality that LESS and Sass provide but with a pithy, streamlined approach.
  3. 3. Unique Features ● Optional colons, semi-colons, braces ● Access properties within their own block ● Extend nested selectors ● Transparent mixins
  4. 4. Optional colons, semi-colons, braces //So clean! $base-color = #000 body font 16px/24px Arial, sans-serif background $base-color
  5. 5. Optional colons, semi-colons, braces body { font: 16px/24px Arial, sans-serif; background: #000; }
  6. 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. 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. 8. Extend Nested Selectors form button box-shadow 1px 0 1px #666 border-radius 3px padding 10px .button @extend form button color #000
  9. 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. 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. 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. 12. Syntax Differences from LESS & Sass ● Assign variables via the equals sign ● Extend-only placeholder selectors ● No property nesting ● Libraries
  13. 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. 14. Extend-only placeholder selectors $notice font-weight bold text-decoration underline .error @extend $notice padding 10px //Sass uses % instead of $
  15. 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. 16. Libraries clearless lesshat nib
  17. 17. Nib: powerful cross-browser CSS3 mixins global-reset() linear-gradient() clearfix() hide-text() And more!
  18. 18. Use Stylus if... ● You prefer concise syntax ● Are comfortable with Jade and CoffeeScript ● Work in a node.js environment
  19. 19. Installation & Usage ● Node.js: npm install stylus ● Grunt: npm install grunt-contribstylus ● Codekit Friendly! ● Play on Codepen.io!
  20. 20. Links & Resources learnboost.github.io/stylus npmjs.org/package/grunt-contrib-stylus visionmedia.github.io/nib/ bit.ly/19Np5p3 bit.ly/1fxXXwm

×