CSS預處理器 sass less stylus

基本語法

Scss & Less

.box {
  display: block;
}

Sass & Stylus

.box
  display: block

嵌套語法

三者的嵌套語法都是一致的，甚至連引用父級選擇器的標記 & 也相同。
區別只是 Sass 和 Stylus 可以用沒有大括號的方式書寫

Less

.a {
  &.b {
    color: red;
  }
}

變量

Sass

$red: #c00;
strong {
  color: $red;
}

Less

@red: #c00;
strong {
  color: @red;
}

Stylus

red = #c00
strong
  color: red

@import

Less 中可以在字符串中進行插值：

@device: mobile;
@import "styles.@{device}.css";

Sass 中只能在使用 url() 表達式引入時進行變量插值：

$device: mobile;
@import url(styles.#{$device}.css);

Stylus 中在這裏插值不管用，但是可以利用其字符串拼接的功能實現：

device = "mobile"
@import "styles." + device + ".css"

混入

混入（mixin）應該說是預處理器最精髓的功能之一了。
它提供了 CSS 缺失的最關鍵的東西：樣式層面的抽象。

Sass

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

Less

.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}

繼承

Stylus,Scss

.message
  padding: 10px
  border: 1px solid #eee

.warning
  @extend .message
  color: #e2e21e

Less

.message {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  &:extend(.message);
  color: #e2e21e;
}

Sass

.active {
   color: red;
}
button.active {
   @extend .active;
}

函數

Stylus

@function golden-ratio($n) {
  @return $n * 0.618;
}

.golden-box {
  width: 200px;
  height: golden-ratio(200px);
}

當需要傳遞參數時，用混合宏；當有現成的class時用繼承；當不需要參數，也不需要class時，用佔位符