Stylus: The Minimalist Preprocessor

Download Stylus: The Minimalist Preprocessor

Post on 28-Jan-2015

105 views

Category:

Design

2 download

Embed Size (px)

DESCRIPTION

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

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, bracesbody { 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. Librariesclearless lesshatnib 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