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>