merge.less 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. .first-transform() {
  2. transform+: rotate(90deg), skew(30deg);
  3. }
  4. .second-transform() {
  5. transform+: scale(2,4);
  6. }
  7. .third-transform() {
  8. transform: scaleX(45deg);
  9. }
  10. .fourth-transform() {
  11. transform+: scaleX(45deg);
  12. }
  13. .fifth-transform() {
  14. transform+: scale(2,4) !important;
  15. }
  16. .first-background() {
  17. background+: url(data://img1.png);
  18. }
  19. .second-background() {
  20. background+: url(data://img2.png);
  21. }
  22. .test1 {
  23. // Can merge values
  24. .first-transform();
  25. .second-transform();
  26. }
  27. .test2 {
  28. // Won't merge values without +: merge directive, for backwards compatibility with css
  29. .first-transform();
  30. .third-transform();
  31. }
  32. .test3 {
  33. // Won't merge values from two sources with different properties
  34. .fourth-transform();
  35. .first-background();
  36. }
  37. .test4 {
  38. .first-transform();
  39. .fifth-transform();
  40. }
  41. .test5 {
  42. .first-transform();
  43. .second-transform() !important;
  44. }
  45. .test6 {
  46. .second-transform();
  47. }
  48. .test7 {
  49. // inherit !important from merged subrules
  50. .second-transform();
  51. .second-transform() !important;
  52. .second-transform();
  53. }
  54. .test-interleaved {
  55. transform+: t1;
  56. background+: b1;
  57. transform+: t2;
  58. background+: b2, b3;
  59. transform+: t3;
  60. }
  61. .test-spaced {
  62. transform+_: t1;
  63. background+_: b1;
  64. transform+_: t2;
  65. background+_: b2, b3;
  66. transform+_: t3;
  67. }
  68. .test-interleaved-with-spaced {
  69. transform+_: t1s;
  70. transform+: t2;
  71. background+: b1;
  72. transform+_: t3s;
  73. transform+: t4 t5s;
  74. background+_: b2s, b3;
  75. transform+_: t6s;
  76. background+: b4;
  77. }