稻草人

1、编辑less：.mixin() { @width: 100%; @height: 200px;}.caller { .mixin(); width: @width; height: @height;}生成css：.caller { width: 100%; height: 200px;}2、编辑less:.average(@x, @y) { @a

1、命令行： $ lessc mian.less

扩展是一个合并减少伪类选择器是放在与匹配的引用。1、扩展编辑less：nav ul { &:extend(.inline); background: blue;}.inline { color: red;}生成css：nav ul { background: blue;}.inline,nav ul { color: red;}2、扩展嵌套选择器编辑less：.

1、.mixin(3)编辑less：.mixin(@a: 3) { property: @a;}p{ .mixin();}生成css：p { property: 3;}2、.mixin(…)编辑less：.mixin(@listofvariables...) { border: @listofvariables;}p { .mixin(1px; solid; r

@nice-blue: #5B83AD; @light-blue: @nice-blue + #111;header { color: @light-blue; }输出： #header { color: #6c94be; }

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}#menu a { color: #111; .bordered;}.post a { color: red; .bordered;}输出：.bordered { border-top: dotted 1px blac

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; }}输出：#header { color: black;}#header .navigation { font-size: 12px;}#header .logo { width: 3

.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }}输出：.clearfix { display: block

组织mixin,提供封装，重用或分发编辑less：#bundle { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } //可以

1、选择器编辑less：// Variables@my-selector: banner;// Usage.@{my-selector} { font-weight: bold; line-height: 40px; margin: 0 auto;} 输出css：.banner { font-weight: bold; line-height: 40px; marg

减少重复代码编辑less：.my-inline-block() { display: inline-block; font-size: 0;}.thing1 { .my-inline-block;}.thing2 { .my-inline-block;}生成css：.thing1 { display: inline-block; font-size: 0;

1、混合类选择器和id选择器编辑less：.a, #b { color: red;}.mixin-class { .a(); //括号可以省略}.mixin-id { #b(); //括号可以省略}生成css：.a, #b { color: red;}.mixin-class { color: red;}.mixin-id { color: re

1、编辑less：.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}#header { .border-radius(4px);}.button { .border-radius(