less的认识与初始化

最近看了看less , 一个被称为装逼神器的css 工具，官网上说的： Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。 其实就是讲css做了一些处理，不过学习起来还是很简单的。也很容易上手。我现在讲的主要是浏览器端如何使用！

一、使用前工作：

1.首先引入：你要写的css文件，：

<link rel="stylesheet/less" type="text/css" href="css/test.less"/>

2.引入 less的 js 文件（这里直接给大家一个连接）

<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

这里的css文件要注意：

① rel 属性要写成stylesheet/less。
② css文件后缀改为 less。
③ 要在引入js前引入 css 文件。
④ css文件可以多个引入，但是css之间不能够直接通信，因为每个css文件（less文件）是相对独立的。如果你想在某个css文件中引入另一个css 需要用到 Impor ，之后我会有文章来讲他。

二、配置全局less对象:

1.配置对象一般写在 引入的less.js 之前

less = {    env: "development",    async: false,      fileAsync: false,    poll: 1000,    functions: {},    dumpLineNumbers: "comments",    relativeUrls: false,    rootpath: ":/a.com/",    errorReporting:"html"};

配置对象参数表：

参数 （type类型）参数 （参数）详解 env (string)
development
productionDefault 运行环境，如果是production，你的css文件将被缓存到本地并且信息不会输出到控制台。如果url以file://开头或者在你本地或者没有标准的端口，这都将被认为是development模式。 async (Boolean)
默认: false 是否异步加载文件 fileAsync (Boolean)
默认: false 当以file协议访问页面，是否异步引入文件 poll (Integer)
默认: 1000 在观察模式下，测试的时间。 functions (object) 用户自定义函数;可以像Less函数一样使用它 dumpLineNumbers (String)
comments
mediaquery
all 如果设置了，这增加了源代码行信息输出的CSS件这有助于您调试，分析其中一个特定的规则是从哪里来的。comments 选项用于输出user-understandable内容,mediaquery 选项用于使用火狐插件解析css文件信息. relativeUrls (Boolean)
默认: false 使用相对路劲。如果设置FALSE，则url是相对根目录文件。 rootpath (String) 设置根目录，所有的Less文件都会以这个目录开始。 errorReporting (String)
默认: html
html
console
function 设置编译失败时错误报告的方法。 useFileCache (Boolean)
默认: true 是否要使用每个会话文件缓存。缓存文件可以使用modifyVars，并且它不会再次检索所有文件。如果您使用观察模式或调用刷新加载设置为true,那么运行之前缓存将被清除。 modifyVars ( Object) 与 globalVars参数含义相反,它将会在你文件最后定义，这意味着它将重写你在文件定义的。 globalVars (Object) 全局变量列表注入代码。“字符串”类型的变量必须显式地包含引号。less.globalVars = { myvar: “#ddffee”, mystr: “\”quoted\”” };这个选项定义了一个可以被文件引用的变量。这个变量也可以在文件中重新定义。 logLevel (Number) 默认: 2 在控制台输出日志的数量。如果是production环境，将不会输出任何信息。

---

2.你也可在<script>标签中配置。 例如：(利用了h5的data 属性)

<script src="less.js" data-async="true"></script>

3.或是在<link> 中去配置

4.他们的优先级是 link>script>全局配置

三、less的观察模式

1.启用观察模式我们需要将参数的env为development；然后在less.js 下加入

 <script> less.watch(); </script>

例子：

<script>      less = {        env: "development",        async: false,        fileAsync: false,        poll: 1000,        functions: {},        dumpLineNumbers: "comments",        relativeUrls: false,        rootpath: ":/a.com/",        errorReporting:"html"      };</script><script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script><script>less.watch();</script>