最近看了看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>