0
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

1,958

Published on

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

Published in: Design, Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,958
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×