apps/wiki/static--wiki--editor--node_modules--grunt-contrib-less--node_modules--less--test/less/css-guards.less

   1
   2 .light when (lightness(@a) > 50%) {
   3   color: green;
   4 }
   5 .dark when (lightness(@a) < 50%) {
   6   color: orange;
   7 }
   8 @a: #ddd;
   9
  10 .see-the {
  11   @a: #444; // this mirrors what mixins do - they evaluate guards at the point of execution
  12   .light();
  13   .dark();
  14 }
  15
  16 .hide-the {
  17   .light();
  18   .dark();
  19 }
  20
  21 .multiple-conditions-1 when (@b = 1), (@c = 2), (@d = 3) {
  22   color: red;
  23 }
  24
  25 .multiple-conditions-2 when (@b = 1), (@c = 2), (@d = 2) {
  26   color: blue;
  27 }
  28
  29 @b: 2;
  30 @c: 3;
  31 @d: 3;
  32
  33 .inheritance when (@b = 2) {
  34   .test {
  35     color: black;
  36   }
  37   &:hover {
  38     color: pink;
  39   }
  40   .hideme when (@b = 1) {
  41     color: green;
  42   }
  43   & when (@b = 1) {
  44     hideme: green;
  45   }
  46 }
  47
  48 .hideme when (@b = 1) {
  49   .test {
  50     color: black;
  51   }
  52   &:hover {
  53     color: pink;
  54   }
  55   .hideme when (@b = 1) {
  56     color: green;
  57   }
  58 }
  59
  60 & when (@b = 1) {
  61   .hideme {
  62     color: red;
  63   }
  64 }