merge.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  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. // Won't merge values from sources that merked as !important, for backwards compatibility with css
  39. .first-transform();
  40. .fifth-transform();
  41. }
  42. .test5 {
  43. // Won't merge values from mixins that merked as !important, for backwards compatibility with css
  44. .first-transform();
  45. .second-transform() !important;
  46. }
  47. .test6 {
  48. // Ignores !merge if no peers found
  49. .second-transform();
  50. }
  51. .test-interleaved {
  52. transform+: t1;
  53. background+: b1;
  54. transform+: t2;
  55. background+: b2, b3;
  56. transform+: t3;
  57. }
  58. .test-spaced {
  59. transform+_: t1;
  60. background+_: b1;
  61. transform+_: t2;
  62. background+_: b2, b3;
  63. transform+_: t3;
  64. }
  65. .test-interleaved-with-spaced {
  66. transform+_: t1s;
  67. transform+: t2;
  68. background+: b1;
  69. transform+_: t3s;
  70. transform+: t4 t5s;
  71. background+_: b2s, b3;
  72. transform+_: t6s;
  73. background+: b4;
  74. }