css-preprocessor-demo/lessDemo.less at master · tlevin/css-preprocessor-demo · GitHub

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
/*
  To install: npm install -g less
  To compile: lessc input.less output.css
*/

// Variables

@primaryColor: red;
@secondaryColor: blue;
@accentColor: green;
@textColor: white;

// Using Variables

.box1 {
  background: @primaryColor;
  color: @textColor;
}

// Nested, & refers to parent selector

.box2 {
  color: red;
  &:hover {
    color:yellow;
  }
}

// Use interpolation for selectors

@greatBox: box3;

.@{greatBox} {
  z-index: 5;
}

// Recursion loop for multiple selectors

.build-box(@n, @i: 1) when (@i =< @n) {
  .box@{i} {
    height: 30px;
    width: 30px;
  }
  .build-box(@n, (@i + 1));
}

.build-box(5);

// Operations are available

@totalWidth: 20px + 10px;

@lightenedColor: #888+#333;
@darkenedColor: #888-#333;

.box2 {
  background-color: @lightenedColor
}

// Mix-ins are very useful

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

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

// Functions can be used

// There are countless functions built into Less