Blame view

node_modules/less/test/less-bom/css-guards.less 1.48 KB
ce4c83ff   wxy   初始提交
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
  
  .light when (lightness(@a) > 50%) {
    color: green;
  }
  .dark when (lightness(@a) < 50%) {
    color: orange;
  }
  @a: #ddd;
  
  .see-the {
    @a: #444; // this mirrors what mixins do - they evaluate the guards at the point of definition
    .light();
    .dark();
  }
  
  .hide-the {
    .light();
    .dark();
  }
  
  .multiple-conditions-1 when (@b = 1), (@c = 2), (@d = 3) {
    color: red;
  }
  
  .multiple-conditions-2 when (@b = 1), (@c = 2), (@d = 2) {
    color: blue;
  }
  
  @b: 2;
  @c: 3;
  @d: 3;
  
  .inheritance when (@b = 2) {
    .test {
      color: black;
    }
    &:hover {
      color: pink;
    }
    .hideme when (@b = 1) {
      color: green;
    }
    & when (@b = 1) {
      hideme: green;
    }
  }
  
  .hideme when (@b = 1) {
    .test {
      color: black;
    }
    &:hover {
      color: pink;
    }
    .hideme when (@b = 1) {
      color: green;
    }
  }
  
  & when (@b = 1) {
    .hideme {
      color: red;
    }
  }
  
  .mixin-with-guard-inside(@colWidth) {
    // selector with guard (applies also to & when() ...)
    .clsWithGuard when (@colWidth <= 0) {
      dispaly: none;
    }
  }
  
  .mixin-with-guard-inside(0px);
  
  .dont-split-me-up {
    width: 1px;
    & when (@c = 3) {
      color: red;
    }
    & when (@c = 3) {
      height: 1px;
    }
    + & when (@c = 3) { // creates invalid css but tests that we don't fold it in
      sibling: true;
    }
  }
  
  .scope-check when (@c = 3) {
    @k: 1px;
    & when (@c = 3) {
      @k: 2px;
      sub-prop: @k;
    }
    prop: @k;
  }
  .scope-check-2 {
    .scope-check();
    @k:4px;
  }
  .errors-if-called when (@c = never) {
    .mixin-doesnt-exist();
  }
  a:hover when (2 = true) {5:-}