Less is More , Than CSS
1. Less是什么？
LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
2. 编译工具
（1）koala编译
Koala
国人开发的LESS/SASS编译工具。
下载地址：http://koala-app.com/index-zh.html
（2）Node.js库
（3）浏览器端使用
关于sublime的less环境安装，参考sublime中用less实现css预编译。
3. 常用语法
（1）注释
可以使用css中的注释（ /**/ ）
也可以用//注释（// 编译时会自动过滤掉）
////Less中的编译 /*我是被编译的*/ //不会被编译的 ////映射到Css中的编译 /*我是被编译的*/
（2）变量
定义变量使用@开头
//Less @200px; @height:200px; .title{ width: @width; height: @height;} //映射到css .title { margin: 0 auto; width: 200px; height: 200px; }
（3）混合-（Mixin）
//less .title{ // .border; //.border_1(5px); .border_2(); } //混合 .border{ border: 2px solid green; } //混合带参数 .border_1(@a){ border: @a solid yellow; } //混合-默认带值 .border_2(@a:10px){ border: @a solid black; } //css .title { border: 10px solid black; } .border { border: 2px solid green; }
//混合的例子(兼容css3语法) //Less .border_radius(@radius:5px){ -webkit-border-radius:@radius; -moz-border-radius:@radius; border-radius:@radius; } .radius_test{ width:100px; height: 40px; background-color: green; //调用混合 .border_radius(10px); } //css .radius_test { width: 100px; height: 40px; background-color: green; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
（4）匹配模式
//匹配模式-三角形 //less .triangle(top,@w:5px,@c:#ccc){ border-width: @w; border-color: transparent transparent @c transparent; border-style: dashed dashed solid dashed; } .triangle(bottom,@w:5px,@c:#ccc){ border-width: @w; border-color: @c transparent transparent transparent; border-style: solid dashed dashed dashed; } .triangle(left,@w:5px,@c:#ccc){ border-width: @w; border-color: transparent @c transparent transparent; border-style: dashed solid dashed dashed; } .triangle(right,@w:5px,@c:#ccc){ border-width: @w; border-color: transparent transparent transparent @c; border-style: dashed dashed dashed solid; } //@_表示匹配任何一个参数，这里是top、bottom、left、right .triangle(@_,@w:5px,@c:#ccc){ width: 0; height: 0; overflow: hidden; } .sanjiao{ .triangle(right,100px); } //css .sanjiao { border-width: 100px; border-color: transparent transparent transparent #ccc; border-style: dashed dashed dashed solid; width: 0; height: 0; overflow: hidden; }
//匹配模式 - 定位例子 //less .pos(r){ position: relative; } .pos(a){ position: absolute; } .pos(f){ position: fixed; } .pipei{ width:200px; height: 200px; background-color: green; .pos(r); } //css .pipei { width: 200px; height: 200px; background-color: green; position: relative; }
（5）运算
//运算 //任何数字、颜色或者变量都可以参与运算，运算应该被包裹在括号中 //less @num:300px; .box{ width:(@num - 20) * 5; color:#ccc - 10; } //css .box { width: 1400px; color: #c2c2c2; }
（6）嵌套规则
//嵌套 //less /* .list{} .list li{} .list a{} .list span{} */ .list{ width:600px; margin: 30px auto; padding: 0; list-style: none; li{ height: 30px; line-height: 30px; background-color: pink; margin-bottom: 5px; padding:0 10px; } a{ float: left; //& 代表他的上一层选择器 &:hover{ color:red; } } span{ float: right; } } //css /* .list{}（6 .list li{} .list a{} .list span{} */ .list { width: 600px; margin: 30px auto; padding: 0; list-style: none; } .list li { height: 30px; line-height: 30px; background-color: pink; margin-bottom: 5px; padding: 0 10px; } .list a { float: left; } .list a:hover { color: red; } .list span { float: right; }
（7）@arguments变量
//arguments //less //@arguments包含了所有传递进来的参数 .border_arg(@w:30px,@c:red,@xx:solid){ border:@arguments; } .test_arguments{ .border_arg(40px); } //css .test_arguments { border: 40px red solid; }
（8）避免编译
//避免编译 //有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法 //要输出这样的值我们可以在字符串前加上一个 ~ //less .test{ width:~'calc(300px - 30px)'; } //css .test { width: calc(300px - 30px); }
（9）！important关键字
//!important //会为所有混合所带来的样式，添加上!important //less .test_important{ .border_radius() !important; //会为所有混合所带来的样式，添加上!important } //css .test_important { -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important; }
4. 例子完整代码
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LESS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="title">hello world!</div> <div class="radius_test"></div> <div class="sanjiao"></div> <div class="pipei"></div> <div class="box"></div> <ul class="list"> <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li> <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li> <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li> <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li> <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li> <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li> <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li> </ul> </body> </html>
LESS：
@charset "utf-8"; @200px; @height:200px; .title{ margin: 0 auto; width: @width; height: @height; background-color: red; // .border; //.border_1(5px); .border_2(); } //混合 .border{ border: 2px solid green; } //混合带参数 .border_1(@a){ border: @a solid yellow; } //混合-默认带值 .border_2(@a:10px){ border: @a solid black; } //混合的例子(兼容css3语法) .border_radius(@radius:5px){ -webkit-border-radius:@radius; -moz-border-radius:@radius; border-radius:@radius; } .radius_test{ width:100px; height: 40px; background-color: green; //调用混合 .border_radius(10px); } //匹配模式-三角形 .triangle(top,@w:5px,@c:#ccc){ border-width: @w; border-color: transparent transparent @c transparent; border-style: dashed dashed solid dashed; } .triangle(bottom,@w:5px,@c:#ccc){ border-width: @w; border-color: @c transparent transparent transparent; border-style: solid dashed dashed dashed; } .triangle(left,@w:5px,@c:#ccc){ border-width: @w; border-color: transparent @c transparent transparent; border-style: dashed solid dashed dashed; } .triangle(right,@w:5px,@c:#ccc){ border-width: @w; border-color: transparent transparent transparent @c; border-style: dashed dashed dashed solid; } //@_表示匹配任何一个参数，这里是top、bottom、left、right .triangle(@_,@w:5px,@c:#ccc){ width: 0; height: 0; overflow: hidden; } .sanjiao{ .triangle(right,100px); } //匹配模式 - 定位例子 .pos(r){ position: relative; } .pos(a){ position: absolute; } .pos(f){ position: fixed; } .pipei{ width:200px; height: 200px; background-color: green; .pos(r); } //运算 //任何数字、颜色或者变量都可以参与运算，运算应该被包裹在括号中 @num:300px; .box{ width:(@num - 20) * 5; color:#ccc - 10; } //嵌套 /* .list{} .list li{} .list a{} .list span{} */ .list{ width:600px; margin: 30px auto; padding: 0; list-style: none; li{ height: 30px; line-height: 30px; background-color: pink; margin-bottom: 5px; padding:0 10px; } a{ float: left; //& 代表他的上一层选择器 &:hover{ color:red; } } span{ float: right; } } //arguments //@arguments包含了所有传递进来的参数 .border_arg(@w:30px,@c:red,@xx:solid){ border:@arguments; } .test_arguments{ .border_arg(40px); } //避免编译 //有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法 //要输出这样的值我们可以在字符串前加上一个 ~ .test{ width:~'calc(300px - 30px)'; } //！important //会为所有混合所带来的样式，添加上!important .test_important{ .border_radius() !important; //会为所有混合所带来的样式，添加上!important }
CSS：
@charset "utf-8"; .title { margin: 0 auto; width: 200px; height: 200px; background-color: red; border: 10px solid black; } .border { border: 2px solid green; } .radius_test { width: 100px; height: 40px; background-color: green; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .sanjiao { border-width: 100px; border-color: transparent transparent transparent #ccc; border-style: dashed dashed dashed solid; width: 0; height: 0; overflow: hidden; } .pipei { width: 200px; height: 200px; background-color: green; position: relative; } .box { width: 1400px; color: #c2c2c2; } /* .list{}（6 .list li{} .list a{} .list span{} */ .list { width: 600px; margin: 30px auto; padding: 0; list-style: none; } .list li { height: 30px; line-height: 30px; background-color: pink; margin-bottom: 5px; padding: 0 10px; } .list a { float: left; } .list a:hover { color: red; } .list span { float: right; } .test_arguments { border: 40px red solid; } .test { width: calc(300px - 30px); } .test_important { -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important; }
5. 总结
CSS代码完全依赖于LESS代码的编写，开发过程中，HTML引入的依旧是CSS代码，而我们编写和修改的是LESS中的样式。Less极大的方便了我们进行CSS样式的编写，因此掌握Lessde 特性，会很大的提高开发效率。