media.less 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. // For now, variables can't be declared inside @media blocks.
  2. @var: 42;
  3. @media print {
  4. .class {
  5. color: blue;
  6. .sub {
  7. width: @var;
  8. }
  9. }
  10. .top, header > h1 {
  11. color: (#222 * 2);
  12. }
  13. }
  14. @media screen {
  15. @base: 8;
  16. body { max-width: (@base * 60); }
  17. }
  18. @ratio_large: 16;
  19. @ratio_small: 9;
  20. @media all and (device-aspect-ratio: @ratio_large / @ratio_small) {
  21. body { max-width: 800px; }
  22. }
  23. @media all and (orientation:portrait) {
  24. aside { float: none; }
  25. }
  26. @media handheld and (min-width: @var), screen and (min-width: 20em) {
  27. body {
  28. max-width: 480px;
  29. }
  30. }
  31. body {
  32. @media print {
  33. padding: 20px;
  34. header {
  35. background-color: red;
  36. }
  37. @media (orientation:landscape) {
  38. margin-left: 20px;
  39. }
  40. }
  41. }
  42. @media screen {
  43. .sidebar {
  44. width: 300px;
  45. @media (orientation: landscape) {
  46. width: 500px;
  47. }
  48. }
  49. }
  50. @media a {
  51. .first {
  52. @media b {
  53. .second {
  54. .third {
  55. width: 300px;
  56. @media c {
  57. width: 500px;
  58. }
  59. }
  60. .fourth {
  61. width: 3;
  62. }
  63. }
  64. }
  65. }
  66. }
  67. body {
  68. @media a, b and c {
  69. width: 95%;
  70. @media x, y {
  71. width: 100%;
  72. }
  73. }
  74. }
  75. .mediaMixin(@fallback: 200px) {
  76. background: black;
  77. @media handheld {
  78. background: white;
  79. @media (max-width: @fallback) {
  80. background: red;
  81. }
  82. }
  83. }
  84. .a {
  85. .mediaMixin(100px);
  86. }
  87. .b {
  88. .mediaMixin();
  89. }
  90. @smartphone: ~"only screen and (max-width: 200px)";
  91. @media @smartphone {
  92. body {
  93. width: 480px;
  94. }
  95. }
  96. @media print {
  97. @page :left {
  98. margin: 0.5cm;
  99. }
  100. @page :right {
  101. margin: 0.5cm;
  102. }
  103. @page Test:first {
  104. margin: 1cm;
  105. }
  106. @page :first {
  107. size: 8.5in 11in;
  108. @top-left {
  109. margin: 1cm;
  110. }
  111. @top-left-corner {
  112. margin: 1cm;
  113. }
  114. @top-center {
  115. margin: 1cm;
  116. }
  117. @top-right {
  118. margin: 1cm;
  119. }
  120. @top-right-corner {
  121. margin: 1cm;
  122. }
  123. @bottom-left {
  124. margin: 1cm;
  125. }
  126. @bottom-left-corner {
  127. margin: 1cm;
  128. }
  129. @bottom-center {
  130. margin: 1cm;
  131. }
  132. @bottom-right {
  133. margin: 1cm;
  134. }
  135. @bottom-right-corner {
  136. margin: 1cm;
  137. }
  138. @left-top {
  139. margin: 1cm;
  140. }
  141. @left-middle {
  142. margin: 1cm;
  143. }
  144. @left-bottom {
  145. margin: 1cm;
  146. }
  147. @right-top {
  148. margin: 1cm;
  149. }
  150. @right-middle {
  151. content: "Page " counter(page);
  152. }
  153. @right-bottom {
  154. margin: 1cm;
  155. }
  156. }
  157. }
  158. @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
  159. .b {
  160. background: red;
  161. }
  162. }
  163. .bg() {
  164. background: red;
  165. @media (max-width: 500px) {
  166. background: green;
  167. }
  168. }
  169. body {
  170. .bg();
  171. }
  172. @bpMedium: 1000px;
  173. @media (max-width: @bpMedium) {
  174. body {
  175. .bg();
  176. background: blue;
  177. }
  178. }
  179. @media (max-width: 1200px) {
  180. /* a comment */
  181. @media (max-width: 900px) {
  182. body { font-size: 11px; }
  183. }
  184. }
  185. .nav-justified {
  186. @media (min-width: 480px) {
  187. > li {
  188. display: table-cell;
  189. }
  190. }
  191. }
  192. .menu
  193. {
  194. @media (min-width: 768px) {
  195. .nav-justified();
  196. }
  197. }
  198. @all: ~"all";
  199. @tv: ~"tv";
  200. @media @all and @tv {
  201. .all-and-tv-variables {
  202. var: all-and-tv;
  203. }
  204. }