1// $a: 12px / 1em; 2// $b: 6px / 1em; 3// $c: 10em; 4// $x: -9999em; 5// $aa: 1px * 1px; 6 7a { 8 $foo: 2em; 9 $bar: 2em; 10 11 foo: $foo; // 2em ✔ 12 bar: $bar; // 2em ✔ 13 // a: $foo * $bar; // 4em*em isn't a valid CSS value. ✔ 14 a: $foo / $bar; // 1 ✔ 15 a: $foo + $bar; // 4em ✔ 16 a: $foo - $bar; // 0em ✔ 17 18 19 $foo: 2px; 20 $bar: 2em; 21 22 foo: $foo; // 2px ✔ 23 bar: $bar; // 2em ✔ 24 // a: $foo * $bar; // 4em*px isn't a valid CSS value. ✔ 25 // a: $foo / $bar; // 1px/em isn't a valid CSS value. ✔ 26 // a: $foo + $bar; // Incompatible units: 'em' and 'px'. ✔ 27 // a: $foo - $bar; // Incompatible units: 'em' and 'px'. ✔ 28 29 30 $foo: 2em; 31 $bar: 2px; 32 33 foo: $foo; // 2em ✔ 34 bar: $bar; // 2px ✔ 35 // a: $foo * $bar; // 4em*px isn't a valid CSS value. ✔ 36 // a: $foo / $bar; // 1em/px isn't a valid CSS value. ✔ 37 // a: $foo + $bar; // Incompatible units: 'px' and 'em'. ✔ 38 // a: $foo - $bar; // Incompatible units: 'px' and 'em'. ✔ 39 40 41 $foo: 2px / 2em; 42 $bar: 2px; 43 44 // foo: $foo; // 1px/em isn't a valid CSS value. ✔ 45 bar: $bar; // 2px ✔ 46 // a: $foo * $bar; // 2px*px/em isn't a valid CSS value. ✔ 47 // a: $foo / $bar; // 0.5/em isn't a valid CSS value. ✔ 48 // a: $foo + $bar; // Incompatible units: '' and 'em'. 49 // a: $foo - $bar; // Incompatible units: '' and 'em'. 50 51 52 $foo: 2em / 2px; 53 $bar: 2px; 54 55 // foo: $foo; // 1em/px isn't a valid CSS value. ✔ 56 bar: $bar; // 2px ✔ 57 a: $foo * $bar; // 2em ✔ 58 // a: $foo / $bar; // 0.5em/px*px isn't a valid CSS value. ✔ 59 // a: $foo + $bar; // Incompatible units: 'px' and 'em'. 60 // a: $foo - $bar; // Incompatible units: 'px' and 'em'. 61 62 63 $foo: 2em / 2px; 64 $bar: 2em / 2px; 65 66 // foo: $foo; // 1em/px isn't a valid CSS value. ✔ 67 // bar: $bar; // 1em/px isn't a valid CSS value. ✔ 68 // a: $foo * $bar; // 1em*em/px*px isn't a valid CSS value. ✔ 69 a: $foo / $bar; // 1 ✔ 70 // a: $foo + $bar; // 2em/px isn't a valid CSS value. ✔ 71 // a: $foo - $bar; // 0em/px isn't a valid CSS value. ✔ 72 73 74 $foo: 2px / 2em; 75 $bar: 2em / 2px; 76 77 // foo: $foo; // 1px/em isn't a valid CSS value. ✔ 78 // bar: $bar; // 1em/px isn't a valid CSS value. ✔ 79 a: $foo * $bar; // 1 ✔ 80 // a: $foo / $bar; // 1px*px/em*em isn't a valid CSS value. ✔ 81 // a: $foo + $bar; // Incompatible units: 'em' and 'px'. 82 // a: $foo - $bar; // Incompatible units: 'em' and 'px'. 83 84 85 $foo: 2px; 86 $bar: 2px / 2em; 87 88 foo: $foo; // 2px ✔ 89 // bar: $bar; // 1px/em isn't a valid CSS value. ✔ 90 // a: $foo * $bar; // 2px*px/em isn't a valid CSS value. ✔ 91 a: $foo / $bar; // 2em ✔ 92 // a: $foo + $bar; // Incompatible units: 'em' and ''. 93 // a: $foo - $bar; // Incompatible units: 'em' and ''. 94 95 96 $foo: 2px; 97 $bar: 2em / 2px; 98 99 foo: $foo; // 2px ✔ 100 // bar: $bar; // 1em/px isn't a valid CSS value. ✔ 101 a: $foo * $bar; // 2em ✔ 102 // a: $foo / $bar; // 2px*px/em isn't a valid CSS value. ✔ 103 // a: $foo + $bar; // Incompatible units: 'em' and 'px'. 104 // a: $foo - $bar; // Incompatible units: 'em' and 'px'. 105} 106