LESS简介

标签：

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

快速上手

LESSCSS的使用是很容易的，首先，使用你最常使用的代码编辑器，按LESSCSS的语法规则写好.less文件，接下来，使用编译工具它编译成.css，最后再引入页面即可。

GUI编译工具

为方便起见，建议初学者使用GUI编译工具来编译.less文件，以下是一些可选GUI编译工具：

1. koala(Win/Mac/Linux)

国人开发的LESSCSS/SASS编译工具。下载地址：http://koala-app.com/index-zh.html

1. Codekit(Mac)

一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具，含语法检查、图片优化、自动刷新等附加功能。下载地址http://incident57.com/codekit/

1. WinLess(Win)

一款LESS编译软件。下载地址http://winless.org/

1. 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也可以不经编译，直接在浏览器端使用。

使用方法：

1. 下载LESSCSS的.js文件，例如lesscss-1.4.0.min.js。
2. 在页面中引入.less文件

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

需要注意rel属性的值是stylesheet/less，而不是stylesheet。

1. 引入第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>

LESS简介

标签：

原文地址：http://www.cnblogs.com/ranyonsue/p/5478344.html