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

Like this? Share it with your network

Share

Stylus: The Minimalist Preprocessor

  • 1,751 views
Uploaded on

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.

More 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

Views

Total Views
1,751
On Slideshare
1,751
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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 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