LESS简明教程

1Less基础

1.1认识Less

CSS（层叠样式表）是一项出色的技术，它使得网页的表现与内容完全分离，使网站维护工作变得更容易，不会因为内容的改变而影响表现，也不会因为表现的改变而影响内容。

作为一门标记性语言，CSS的先天性优点是语法相对简单，对使用者的要求较低，但它的致命弱点是需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。

造成这一现象的很大原因在于CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

Less的出现，为Web开发者带来了福音，它是一门CSS预处理语言，引入了变量、运算、函数、继承等功能，为CSS语言赋予了动态语言的特性。

Less大大简化了CSS的编写，并且降低了CSS的维护成本。就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

1.2Less原理

Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

Less并没有裁剪CSS原有的特性，更不是用来取代CSS的，而是在现有CSS语法的基础上，为CSS加入程序式语言的特性。先看一个简单的例子，Less代码如下：

color:#4df;

header{

color:

color;

}

h2{

color:

color;

}

上面的例子定义了一个变量

color，然后在选择器header和h2中使用它。编译后的CSS代码为：

header{

color:#4df;

}

h2{

color:#4df;

}

从上面的例子可知，Less并没有改变CSS的语法。因此，学习Less非常容易，只要你了解CSS基础，就可以很容易上手。

1.3Less用法

Less可以直接在浏览器端运行（支持IE6+、Webkit、Firefox），也可以借助Node.js或者Rhino在服务端运行。

Less是一种动态语言，无论是在浏览器端，还是在服务器端运行，最终还是需要编译成CSS，才会发挥其作用。

1.3.1浏览器端使用

在浏览器端直接使用Less，浏览器会直接为页面应用编译后的CSS样式，而不是生成单独的CSS文件。

在浏览器端直接使用Less，需要一个脚本的支持，这个脚本就是Less.js，它Less解析器，可以在浏览器端把.less文件解析成CSS样式。你可以从

转载请注明：http://www.abachildren.com/sstx/3503.html