Your SlideShare is downloading. ×
  • Like
Stylus: The Minimalist Preprocessor
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Stylus: The Minimalist Preprocessor


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

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

Published in Design , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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!
  • 20. Links & Resources