CSS Preprocessors
A Comparison
What we have
- Sass
- Less
- Stylus
Sass
- 7M/month
- 103 issues
- 23 pull requests
Less
- 3.7M/month
- 128 issues
- 8 pull requests
Stylus
- 1.8M/month
- 180 issues
- 14 pull requests
Comparison syntax
/* style.css */
h1 {
color: #0982C1;
}
/* style.less */
h1 {
color: #0982C1;
}
/* style.scss */
h1 {
color: #0982C1;
}
/* style.styl */
h1 {
color: #0982C1;
}
/* style.scss */
h1
color: #0982C1
/* style.styl */
h1
color #0982C1
Comparison variables
/* style.css */
h1 {
--mainColor: #0982C1;
color: var(--mainColor);
}
/* style.less */
@mainColor: #0982c1;
h1 {
color: @mainColor;
}
/* style.scss */
$mainColor: #0982c1;
h1 {
color: $mainColor;
}
/* style.styl */
mainColor = #0982c1;
h1 {
color: mainColor;
}
Comparison nesting
/* style.css */
h1 a {
color: teal;
}
/* style.{less,scss,styl} */
h1 {
a {
color: teal;
}
}
Comparison mixin
/* style.scss */
@mixin error($borderWidth: 2px) {
border: $borderWidth solid #F00;
}
.generic-error {
@include error();
}
/* style.less */
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
}
.generic-error {
.error();
}
/* style.styl */
error(borderWidth= 2px) {
border: borderWidth solid #F00;
}
.generic-error {
error();
}
using a
PREPROCESSOR
is BETTER
than nothing
autoprefixer
Further reading
https://code.tutsplus.com/tutorials/sass-vs-less-vs-stylus-preprocessor-shootout--net-24320
css-preprocessors
By Pontus Lundin
css-preprocessors
- 317