LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。
快速上手
LESSCSS的使用是很容易的,首先,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。
GUI编译工具
为方便起见,建议初学者使用GUI编译工具来编译.less文件,以下是一些可选GUI编译工具:
- koala(Win/Mac/Linux)
国人开发的LESSCSS/SASS编译工具。下载地址:http://koala-app.com/index-zh.html
- Codekit(Mac)
一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具,含语法检查、图片优化、自动刷新等附加功能。下载地址http://incident57.com/codekit/
- WinLess(Win)
一款LESS编译软件。下载地址http://winless.org/
- SimpleLess(Win/Mac/Linux)
一款LESS编译软件。下载地址http://wearekiss.com/simpless
Node.js库
LESSCSS官方有一款基于Node.js的库,用于编译.less文件。
使用时,首先全局安装less(部分系统下可能需要在前面加上sudo切换为超级管理员权限):
npm install -g less
接下来就可以使用lessc来编译.less文件了:
lessc example/example.less example/example.css
更多选项可以直接运行lessc查看说明。
浏览器端使用
LESSCSS也可以不经编译,直接在浏览器端使用。
使用方法:
- 下载LESSCSS的.js文件,例如lesscss-1.4.0.min.js。
- 在页面中引入.less文件
<link rel="stylesheet/less" type="text/css" href="styles.less" />
需要注意rel
属性的值是stylesheet/less
,而不是stylesheet
。
- 引入第1步下载的.js文件
<script src="less.js" type="text/javascript"></script>
需要特别注意的是,由于浏览器端使用时是使用ajax来拉取.less文件,因此直接在本机文件系统打开(即地址是file:
//开头)或者是有跨域的情况下会拉取不到.less文件,导致样式无法生效。
还有一种情况容易导致样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css
(具体方法请搜索)。或者还有一种更简单的方法,即是直接将.less文件改名为.css文件即可。
提示:
1.务必确保在 less.js 之前加载你的样式表。
2.如果加载多个 .less 样式表文件,每个文件都会被单独编译。因此,一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问 。
在 <script src="less.js"></script>
之前 定义全局的 less
对象就可以为 Less.js
设置参数:
<script> less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000, functions: {},
dumpLineNumbers: "comments",
relativeUrls: false, rootpath: ":/a.com/" };
</script>
<script src="less.js"></script>