mixins.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. .mixin { border: 1px solid black; }
  2. .mixout { border-color: orange; }
  3. .borders { border-style: dashed; }
  4. .mixin > * { border: do not match me; }
  5. #namespace {
  6. .borders {
  7. border-style: dotted;
  8. }
  9. .biohazard {
  10. content: "death";
  11. .man {
  12. color: transparent;
  13. }
  14. }
  15. }
  16. #theme {
  17. > .mixin {
  18. background-color: grey;
  19. }
  20. }
  21. #container {
  22. color: black;
  23. .mixin;
  24. .mixout;
  25. #theme > .mixin;
  26. }
  27. #header {
  28. .milk {
  29. color: white;
  30. .mixin;
  31. #theme > .mixin;
  32. }
  33. #cookie {
  34. .chips {
  35. #namespace .borders;
  36. .calories {
  37. #container;
  38. }
  39. }
  40. .borders;
  41. }
  42. }
  43. .secure-zone { #namespace .biohazard .man; }
  44. .direct {
  45. #namespace > .borders;
  46. }
  47. .bo, .bar {
  48. width: 100%;
  49. }
  50. .bo {
  51. border: 1px;
  52. }
  53. .ar.bo.ca {
  54. color: black;
  55. }
  56. .jo.ki {
  57. background: none;
  58. }
  59. .amp {
  60. &.support {
  61. color: orange;
  62. .higher {
  63. top: 0px;
  64. }
  65. &.deeper {
  66. height: auto;
  67. }
  68. }
  69. }
  70. .extended {
  71. .bo;
  72. .jo.ki;
  73. .amp.support;
  74. .amp.support.higher;
  75. .amp.support.deeper;
  76. }
  77. .do .re .mi .fa {
  78. .sol .la {
  79. .si {
  80. color: cyan;
  81. }
  82. }
  83. }
  84. .mutli-selector-parents {
  85. .do.re.mi.fa.sol.la.si;
  86. }
  87. .foo .bar {
  88. .bar;
  89. }
  90. .has_parents() {
  91. & .underParents {
  92. color: red;
  93. }
  94. }
  95. .has_parents();
  96. .parent {
  97. .has_parents();
  98. }
  99. .margin_between(@above, @below) {
  100. * + & { margin-top: @above; }
  101. legend + & { margin-top: 0; }
  102. & + * { margin-top: @below; }
  103. }
  104. h1 { .margin_between(25px, 10px); }
  105. h2 { .margin_between(20px, 8px); }
  106. h3 { .margin_between(15px, 5px); }
  107. .mixin_def(@url, @position){
  108. background-image: @url;
  109. background-position: @position;
  110. }
  111. .error{
  112. @s: "/";
  113. .mixin_def( "@{s}a.png", center center);
  114. }
  115. .recursion() {
  116. color: black;
  117. }
  118. .test-rec {
  119. .recursion {
  120. .recursion();
  121. }
  122. }
  123. .paddingFloat(@padding) { padding-left: @padding; }
  124. .button {
  125. .paddingFloat(((10px + 12) * 2));
  126. &.large { .paddingFloat(((10em * 2) * 2)); }
  127. }
  128. .clearfix() {
  129. // ...
  130. }
  131. .clearfix {
  132. .clearfix();
  133. }
  134. .clearfix {
  135. .clearfix();
  136. }
  137. .foo {
  138. .clearfix();
  139. }