Stylus: The Minimalist Preprocessor
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


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.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Stylus: The Minimalist Preprocessor Presentation Transcript

  • 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