Stylus

中文

英文官网

中文

英文官网

Appearance

Return to top
On this page

Implementation Comparisons

Below we go head to head with other implementations.

变量(Variables)

SCSS:

$main-color: #006;
color: $main-color;

$main-color: #006;
color: $main-color;

Less:

@main-color: #006;
color: @main-color;

@main-color: #006;
color: @main-color;

Stylus:

main-color = #006
color: main-color

main-color = #006
color: main-color

混合(Mixins)

SCSS:

@mixin pad($x, $y) {
  padding: $y $x;
}

.msg {
  @include pad(5px, 10px);
}

@mixin pad($x, $y) {
  padding: $y $x;
}

.msg {
  @include pad(5px, 10px);
}

Less:

.pad(@x, @y) {
  padding: @y @x;
}

.msg {
  .pad(5px, 10px);
}

.pad(@x, @y) {
  padding: @y @x;
}

.msg {
  .pad(5px, 10px);
}

Stylus:

pad(x, y)
  padding: y x

.msg
  pad(5px, 10px)

pad(x, y)
  padding: y x

.msg
  pad(5px, 10px)

Complex Example

SCSS:

@mixin box-shadow ($x: 0, $y: 0, $blur: 1px, $alpha: 1) {
  $val: $x $y $blur rgba(0, 0, 0, $alpha);
  -webkit-box-shadow: $val;
  -moz-box-shadow:    $val;
  box-shadow:         $val;
}
.box {
  $base: #f938ab;
  color:        saturate($base, 5%);
  border-color: lighten($base, 30%);
  div {
    @include box-shadow(0, 0, 5px, 0.4);
  }
}

@mixin box-shadow ($x: 0, $y: 0, $blur: 1px, $alpha: 1) {
  $val: $x $y $blur rgba(0, 0, 0, $alpha);
  -webkit-box-shadow: $val;
  -moz-box-shadow:    $val;
  box-shadow:         $val;
}
.box {
  $base: #f938ab;
  color:        saturate($base, 5%);
  border-color: lighten($base, 30%);
  div {
    @include box-shadow(0, 0, 5px, 0.4);
  }
}

Less:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha: 1) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);
  -webkit-box-shadow: @val;
  -moz-box-shadow:    @val;
  box-shadow:         @val;
}
.box {
  @base: #f938ab;
  color:        saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div {
    .box-shadow(0, 0, 5px, 0.4);
  }
}

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha: 1) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);
  -webkit-box-shadow: @val;
  -moz-box-shadow:    @val;
  box-shadow:         @val;
}
.box {
  @base: #f938ab;
  color:        saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div {
    .box-shadow(0, 0, 5px, 0.4);
  }
}

Stylus:

box-shadow($x = 0, $y = 0, $blur = 1px, $alpha = 1)
  $val = $x $y $blur rgba(0, 0, 0, $alpha)
  -webkit-box-shadow: $val
  -moz-box-shadow:    $val
  box-shadow:         $val

.box
  base = #f938ab
  color:        saturate(base, 5%)
  border-color: lighten(base, 30%)
  div
    box-shadow: 0 0 5px 0.4

box-shadow($x = 0, $y = 0, $blur = 1px, $alpha = 1)
  $val = $x $y $blur rgba(0, 0, 0, $alpha)
  -webkit-box-shadow: $val
  -moz-box-shadow:    $val
  box-shadow:         $val

.box
  base = #f938ab
  color:        saturate(base, 5%)
  border-color: lighten(base, 30%)
  div
    box-shadow: 0 0 5px 0.4