Talk given at PDX Javascript Admirers group comparing CSS preprocessors.
Original slides available at http://patrickarlt.github.io/sass-less-stylus-slides/
2. Some Background
I'm an Designer and Developers at Geoloqi Esri.
Design, UX, HTML, CSS, JS, lots of it everyday...
3. Ok Ok, which is best?
Really Short Answer
SASS or Stylus
Slightly Longer Answer
SASS if you are using Ruby. Stylus if you using Node. LESS if
you afraid of the command line.
4. 80/20
80% of SASS, LESS and Stylus is the same.
The 20% that is different is in advanced usage.
12. Nesting
You can nest selectors in all three frameworks.
#main{
margin: 0 auto;
.title {
font-size: 4em;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
13. Imports
All 3 support importing from other files or libraries...
@import "compass/css3";
@import "susy";
@import "animation/animate";
@import "myfile.scss";
#main {
@include border-radius(5px); // from compass/css3
@include span-columns(10); // from susy
@include animation(fadeIn); // from animation/animate
background: $background-color; // from myfile.scss
}
#sidebar {
@include span-columns(2 omega); // from susy
}
14. More Features
Conditionals like "if, "when"
MATH!
SASS and Stylus
Loops like "for", "while", and "each"
Much more depth then LESS
Custom functions without the Ruby/JS API
19. @media
Declare media queries inside selectors
#content {
width: 65%;
margin: 0 auto;
@media only screen and (max-width : 767px) {
width: 90%;
}
}
#content {
width: 65%;
margin: 0 auto;
}
@media only screen and (max-device-width : 768px) {
#content {
width: 90%;
}
}
20. @content
My favorite SASS feature. Lets you pass whole style blocks
into mixins. Similar to Rubys "yeild". Use it for...
Media Query Helpers
Retina Images
IE Specific Styles
CSS3 Polyfills
26. Scoped Variables
Variables have scope which makes them it easy to override
@text-color: #444;
@background-color: #fafafa;
body {
color: @text-color;
background: @background-color;
}
.inverse {
@text-color: #fafafa;
@background-color: #444;
color: @text-color;
background: @background-color;
}
h1 { color: @text-color + #111; }
27. Client-Side Compiling
Great for static HTML sites
Sites where you don't have a real server (S3)
You can evaluate Javascript in your .less files
Evalute Javascipt
You can evalute a javascript expression as a variable
@height: `document.body.clientHeight`;
@width: `document.body.clientWidth`;
29. Stylus Syntax
Whitespace Based
Can omit { : ; }
The biggest problem I have with Stylus is with its syntax
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
font 12px Helvetica, Arial, sans-serif
a.button
border-radius(5px)
30. Stylus Language
Stylus feels very much like a simple programming language
Ruby-like ranges [1..5], [0...5]
for/in loops
real operator precidence
complex conditionals if/else if/else, unless/else, postfix
conditionals
31. @keyframe Support
CSS3 keyframes are awesome, Stylus makes then easy
This is awesome!
@keyframes pulse
0%, 100%
-webkit-transform translateX(0);
20%, 60%
-webkit-transform translateX(-10px);
40%, 80%
-webkit-transform translateX(10px);
32. Javascript API
You could do a whole talk on the Stylus API, here are some
ideas...
Declare really custom functions
Use Node modules like canvas
Do Compass-like sprite generation
Create your own CSS framework
33. Nib
CSS3 helpers - gradiants, border-radius, ect...
Mixins for common css patterns
Extends CSS with new properties and values
#feedback
fixed: bottom right
#logo
image: '/img/logo.png'
h1
overflow: ellipsis
35. LESS Looses
LESS just doesn't have the features or power of SASS or
Stylus
Nothing like Compass or Nib
No plugin system
Can't define your own functions with just LESS
Doesn't output any debugging info
36. SASS vs. Stylus
Both have similar features, a powerful plugin ecosystem,
and lots of CSS3 helpers.
SASS syntax is close to CSS
Stylus is closer to a programming language
If you use Ruby you will probally use SASS
If you use Node you will probally use Stylus