标签：version 另一个 url into 属性 round width lin base
1.Less是基于JS编译的，不能直接使用的样式表
2.Less可以定义变量，在作用域中使用，并且部分变量可进行运算
@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; }
输出：
#header { color: #6c94be; }
3.可以在一个类名中引用另一个类名来复用它的样式
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } .post a { color: red; .bordered; }
4.为了代码的可读性可以进行类名声明时嵌套
未嵌套前：
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }
嵌套后：
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }
5.在类名嵌套声明时可以使用“&”符号来表示它的父级
.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }
6.进行运算时的规律
// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px
// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
当运算不能转换时，以第一个单位为准
@base: 2cm * 3mm; // result is 6cm
7.颜色运算时规律
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355
8.Less内置了多种函数用于转换颜色、处理字符串、算术运算等。
@base: #f04615; @width: 0.5; .class { width: percentage(@width); // 将0.5转换为50% color: saturate(@base, 5%); //将颜色饱和度增加5% background-color: spin(lighten(@base, 25%), 8); //亮度降低25%,色相增加8 }
9.作用域问题，和JS一样，就近原则
@var: red; #page { @var: white; #header { color: @var; // white } }
@var: red; #page { #header { color: @var; // white } @var: white; }
10.选择器也可以预定义
// Variables @mySelector: banner; // Usage .@{mySelector} { font-weight: bold; line-height: 40px; margin: 0 auto; }
输出后
.banner { font-weight: bold; line-height: 40px; margin: 0 auto; }
11.URLs预定义和调用
// Variables @images: "../img"; // 用法 body { color: #444; background: url("@{images}/white-sand.png"); }
12.在一个Less中可以引用另一个Less，但是小心会有属性复写问题
// library
@base-color: green;
@dark-color: darken(@base-color, 10%);
// use of library
@import "library.less";
@base-color: red; //base-color被重写，dark-color也被覆盖为dark-red
13.继承属性Extend，必须被写在最后
nav ul { &:extend(.inline); background: blue; } .inline { color: red; }
上例也可以写成
nav ul:extend(.inline) {}
输出后：
nav ul { background: blue; } .inline, nav ul { color: red; }
14.继承外部使用!important的时候所有属性都将加上!important
.foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color; } .unimportant { .foo(1); } .important { .foo(2) !important; }
输出后：
.unimportant { background: #f5f5f5; color: #900; } .important { background: #f5f5f5 !important; color: #900 !important; }
15.类名后面加括号只能挡模板，不能被输出使用
.mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px); }
输出后：
.class1 { color: #33acfe; margin: 20px; padding: 20px; } .class2 { color: #efca44; margin: 10px; padding: 40px; } The
标签：version 另一个 url into 属性 round width lin base
原文地址：http://www.cnblogs.com/jackyhouse/p/7069204.html
