在浏览器中使用LESSCSS
浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中，尤其是对性能要求比较高的场合，建议使用node或者其它第三方工具先编译成CSS再上线使用。
浏览器端使用方法：
-
使用
link引入.less文件，注意将rel设为stylesheet/less:<link rel="stylesheet/less" type="text/css" href="styles.less" /> -
在本站下载less.js，将它引入页面的
<head>元素中，像这样：<script src="less.js" type="text/javascript"></script>
需要注意.less文件要在脚本文件之前引入。
基本用法如下：
/*定义一个color变量*/ @red: #e74c3c; #header{ color: @red;//引用之前定义好的变量, 变量是“按需加载”（lazy loaded）的，因此不必强制在使用之前声明。所以@red在后面定义也是可以的
} h2{ color: @red; }
/* 定义一个warning类 * 可以像函数一样向类传递参数*/ .warning (@warning:orange){ background-color:@warning; } #warning{ .warning; } #error{ .warning(red); } /* 当然， 还可以嵌套 */ #footer{ h2{ color:blue; } p{ color:grren; a{ background-color:orange; &:hover{ background-color:red; } } } } /* 函数和运算 */ @the-border: 1px; @base-color: #111; #header{ color:(@base-color * 3); boder-left:@the-border; boder-right:(@the-border * 10); } #footer{ background-color: desaturate(@red, 30%);//降低饱和度：desaturate(color, x%); }