...
// 1.變數:顏色可做+- // from @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } // to #header { color: #6c94be;} // 2.混入(Mixins),#id,.class的樣式直接添加 // from .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #backgroundcolor { background-color: #fcf; } #menu a { color: #111; .bordered; #backgroundcolor; } // 2.1 帶參數混入 .border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } #header { .border-radius(4px); } .button { .border-radius(6px); } // 3.嵌套規則 // from #header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } } // to #header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } // 套用偽類 .clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } } // 4.運算:任何數字、顏色或者變數都可以參與運算。 @base: 5%; @filler: @base * 2; @other: @base + @filler; // color: #888 / 4; // background-color: @base-color + #111; // height: 100% / 2 + @filler; // 5.函數 percentage, saturate, spin, lighten @base: #f04615; @width: 0.5; .class { width: percentage(@width); // returns `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); } // 6.命名空間和訪問器 #bundle { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } } #header a { color: orange; #bundle > .button;//引入 } // 7.作用域:擁有塊級作用域{} @var: red; #page { @var: white; #header { color: @var; // white } } #footer { color: @var; // red } // 8.導入import, 同一個文件只能導入一次,@import xx 只有第一次語句有效 @import "lib.css"; @import "lib"; //lib.less; @imported-color: red; h1 { color: green; } @import "library.less" screen and (max-width: 400px); // 通過media query指定的import @import "library.less"; // 無media query的import .class { color: @importedColor; // 使用導入的變數 } // to // 對應通過media query指定的import @media screen and (max-width: 400px) { h1 { color: green; } } // 對應無media query的import h1 { color: green; } .class { // 使用導入的變數 color: #ff0000; } // 8.1 在規則中導入 pre { @import "library.less"; color: @importedColor; } // 9.字元串插值 @base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png"); // 10.選擇器插值 @name: blocked; .@{name} { color: black; } // 11.media query作為變數 @singleQuery: ~"(max-width: 500px)"; @media screen, @singleQuery { set { padding: 3 3 3 3; } } // to @media screen, (max-width: 500px) { set { padding: 3 3 3 3; } }