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