Less初步学习

Less

编译工具

• Koala编译 网址：http://koala-app.com/index-zh...
• Node.js
• 浏览器端使用

LESS中的注释

• /**/
• // (编译时会被自动过滤掉)

变量

• @变量名 例如:@c:#000;

混合

• 混合变量 例如：.border{border:1pxsolid #000;}
• 带参数的混合变量 例如:.border_02(@border_width){border: @border_width solid #000}
• 带参数默认值的混合变量 例如:.border_03(@border_width:10px){border: @border_width solid #000}

运算

• 任何数字、颜色或者变量均可以参与运算，运算应该被包裹在括号中。例如:width: @test_width_03 - 20*10;

避免编译

• 输出less不认识的专用语法 例如:width: ~'calc(300px-30px)';