Less与Stylus

1. Less

Less 是一种 CSS 预处理器，语法接近 CSS，学习成本低。

1.1 变量

@primary: #3498db;
@spacing: 1rem;

body {
  color: @primary;
  padding: @spacing;
}

1.2 混合

.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  .flex-center();
}

1.3 嵌套与运算

.nav {
  a {
    color: @primary;
    &:hover {
      opacity: 0.8;
    }
  }
}

@base: 16px;
h1 {
  font-size: @base * 2;
}

2. Stylus

Stylus 提供更灵活的语法，大括号和分号均可省略。

2.1 变量

primary = #3498db
spacing = 1rem

body
  color primary
  padding spacing

2.2 混合

flex-center()
  display flex
  justify-content center
  align-items center

.container
  flex-center()

2.3 函数

rem(px)
  (px / 16) * 1rem

h1
  font-size rem(32)

3. 对比