CSS Preprocessors

A Comparison

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

/* 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;
}

/* style.css */
h1 a {
  color: teal;
}

/* style.{less,scss,styl} */
h1 {
  a {
    color: teal;
  }
}

/* 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();
}