// 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;
}
}