Stylus 与其他预处理器对比 #

// Stylus
primary-color = #3498db
font-size = 16px

// Sass/SCSS
$primary-color: #3498db;
$font-size: 16px;

// Less
@primary-color: #3498db;
@font-size: 16px;

// Stylus
.nav
  ul
    list-style none
  li
    display inline-block
  a
    text-decoration none

// Sass/SCSS
.nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
  }
}

// Less
.nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
  }
}

// Stylus
border-radius(radius)
  -webkit-border-radius radius
  border-radius radius

.button
  border-radius(5px)

// Sass/SCSS
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

// Less
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.button {
  .border-radius(5px);
}

// Stylus
px-to-rem(px)
  (px / 16) * 1rem

body
  font-size px-to-rem(16)

// Sass/SCSS
@function px-to-rem($px) {
  @return ($px / 16) * 1rem;
}

body {
  font-size: px-to-rem(16px);
}

// Less（无原生函数，使用混入模拟）
.px-to-rem(@px) {
  font-size: (@px / 16) * 1rem;
}

body {
  .px-to-rem(16);
}

// Stylus
if theme == 'dark'
  background-color #333
else
  background-color #fff

// Sass/SCSS
@if $theme == 'dark' {
  background-color: #333;
} @else {
  background-color: #fff;
}

// Less（使用 guards）
.background-color(@theme) when (@theme = 'dark') {
  background-color: #333;
}
.background-color(@theme) when not (@theme = 'dark') {
  background-color: #fff;
}

// Stylus
for i in 1..5
  .col-{i}
    width (i * 20)%

// Sass/SCSS
@for $i from 1 through 5 {
  .col-#{$i} {
    width: $i * 20%;
  }
}

// Less（递归模拟）
.generate-columns(@n, @i: 1) when (@i =< @n) {
  .col-@{i} {
    width: @i * 20%;
  }
  .generate-columns(@n, (@i + 1));
}
.generate-columns(5);

// Sass
$primary-color: #3498db;
@mixin button($color) {
  background-color: $color;
}
.button {
  @include button($primary-color);
}

// Stylus
primary-color = #3498db
button(color)
  background-color color
.button
  button(primary-color)

// Less
@primary-color: #3498db;
.button(@color) {
  background-color: @color;
}
.button {
  .button(@primary-color);
}

// Stylus
primary-color = #3498db
button(color)
  background-color color
.button
  button(primary-color)

小型项目（< 100KB）：
Stylus  ████████████████████  最快
Less    ████████████████████  快
Sass    ██████████████████    较快

大型项目（> 1MB）：
Stylus  ████████████████████  快
Less    ████████████████████  快
Sass    ██████████████        较慢（Dart Sass 有改进）

项目规模：
├── 小型项目 ──→ Less 或 Stylus
├── 中型项目 ──→ Stylus 或 Sass
└── 大型项目 ──→ Sass

团队经验：
├── CSS 基础弱 ──→ Less
├── 有预处理经验 ──→ Stylus
└── 企业开发 ──→ Sass

技术栈：
├── Node.js ──→ Stylus 或 Less
├── Ruby ──→ Sass
└── 无偏好 ──→ Sass 或 Stylus