08-27-周三_17-09-29

node_modules/less/test/less-bom/media.less

@@ -0,0 +1,234 @@
+
+// For now, variables can't be declared inside @media blocks.
+
+@var: 42;
+
+@media print {
+    .class {
+        color: blue;
+        .sub {
+            width: @var;
+        }
+    }
+    .top, header > h1 {
+        color: (#222 * 2);
+    }
+}
+
+@media screen {
+    @base: 8;
+    body { max-width: (@base * 60); }
+}
+
+@ratio_large: 16;
+@ratio_small: 9;
+
+@media all and (device-aspect-ratio: @ratio_large / @ratio_small) {
+   body { max-width: 800px; }
+}
+
+@media all and (orientation:portrait) {
+    aside { float: none; }
+}
+
+@media handheld and (min-width: @var), screen and (min-width: 20em) {
+    body {
+        max-width: 480px;
+    }
+}
+
+body {
+    @media print {
+        padding: 20px;
+
+        header {
+            background-color: red;
+        }
+
+        @media (orientation:landscape) {
+            margin-left: 20px;
+        }
+    }
+}
+
+@media screen {
+  .sidebar {
+    width: 300px;
+    @media (orientation: landscape) {
+      width: 500px;
+    }
+  }
+}
+
+@media a {
+  .first {
+    @media b {
+      .second {
+        .third {
+          width: 300px;
+          @media c {
+            width: 500px;
+          }
+        }
+        .fourth {
+          width: 3;
+        }
+      }
+    }
+  }
+}
+
+body {
+    @media a, b and c {
+        width: 95%;
+
+        @media x, y {
+            width: 100%;
+        }
+    }
+}
+
+.mediaMixin(@fallback: 200px) {
+    background: black;
+
+    @media handheld {
+        background: white;
+
+        @media (max-width: @fallback) {
+            background: red;
+        }
+    }
+}
+
+.a {
+  .mediaMixin(100px);
+}
+
+.b {
+  .mediaMixin();
+}
+@smartphone: ~"only screen and (max-width: 200px)";
+@media @smartphone {
+  body {
+    width: 480px;
+  }
+}
+
+@media print {
+  @page :left {
+    margin: 0.5cm;
+  }
+  @page :right {
+    margin: 0.5cm;
+  }
+  @page Test:first {
+    margin: 1cm;
+  }
+  @page :first {
+    size: 8.5in 11in;
+    @top-left {
+      margin: 1cm;
+    }
+    @top-left-corner {
+      margin: 1cm;
+    }
+    @top-center {
+      margin: 1cm;
+    }
+    @top-right {
+      margin: 1cm;
+    }
+    @top-right-corner {
+      margin: 1cm;
+    }
+    @bottom-left {
+      margin: 1cm;
+    }
+    @bottom-left-corner {
+      margin: 1cm;
+    }
+    @bottom-center {
+      margin: 1cm;
+    }
+    @bottom-right {
+      margin: 1cm;
+    }
+    @bottom-right-corner {
+      margin: 1cm;
+    }
+    @left-top {
+      margin: 1cm;
+    }
+    @left-middle {
+      margin: 1cm;
+    }
+    @left-bottom {
+      margin: 1cm;
+    }
+    @right-top {
+      margin: 1cm;
+    }
+    @right-middle {
+      content: "Page " counter(page);
+    }
+    @right-bottom {
+      margin: 1cm;
+    }
+  }
+}
+
+@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) {
+  .b {
+    background: red;
+  }
+}
+
+.bg() {
+    background: red;
+
+    @media (max-width: 500px) {
+        background: green;
+    }
+}
+
+body {
+    .bg();
+}
+
+@bpMedium: 1000px;
+@media (max-width: @bpMedium) {
+    body {
+        .bg();
+        background: blue;
+    }
+}
+
+@media (max-width: 1200px) {
+  /* a comment */
+
+  @media (max-width: 900px) {
+    body { font-size: 11px; }
+  }
+}
+
+.nav-justified {
+  @media (min-width: 480px) {
+    > li {
+      display: table-cell;
+    }
+  }
+}
+
+.menu
+{
+  @media (min-width: 768px) {
+    .nav-justified();
+  }
+}
+@all: ~"all";
+@tv: ~"tv";
+@media @all and @tv {
+  .all-and-tv-variables {
+    var: all-and-tv;
+  }
+}