1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
---
layout: default
permalink: docs/compare.html
---
# Implementation Comparisons
Below we go head to head with other implementations.
## Variables
SCSS:
$main-color: #006;
color: $main-color;
Less:
@main-color: #006;
color: @main-color;
Stylus:
main-color = #006
color main-color
## Mixins
SCSS:
@mixin pad($x, $y) {
padding: $y $x;
}
.msg {
@include pad(5px, 10px);
}
Less:
.pad(@x, @y) {
padding: @y @x;
}
.msg {
.pad(5px, 10px);
}
Stylus:
pad(x, y)
padding y x
.msg
pad(5px, 10px)
## Larger Example
Less:
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
@val: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @val;
-webkit-box-shadow: @val;
-moz-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()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
.box
base = #f938ab
color saturate(base, 5%)
border-color lighten(base, 30%)
div
box-shadow 0 0 5px 0.4
|
