LESS

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增长了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制做主题、扩充。

2009由我的开发，2012年由团队开发，现现在最新版本为3.x。

CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被普遍应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。 做为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 须要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤为对于非前端开发工程师来说，每每会由于缺乏 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，形成这些困难的很大缘由源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（做用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，而且下降了 CSS 的维护成本，就像它的名称所说的那样，LESS 可让咱们用更少的代码作更多的事情。[1]

LESS 原理及使用方式 编辑

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义本身的样式规则，这些规则最终会经过解析器，编译生成对应的 CSS 文件。LESS 并无裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

 

less客户端

咱们能够直接在客户端使用 .less（LESS 源文件），只须要从http://lesscss.org下载 less.js 文件，而后在咱们须要引入 LESS 源文件的 HTML 中加入以下代码： <link rel="stylesheet/less" type="text/css" href="styles.less"> LESS 源文件的引入方式与标准 CSS 文件引入方式同样： <link rel="stylesheet/less" type="text/css" href="styles.less"> 须要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点须要注意的是：LESS 源文件必定要在 less.js 引入以前引入，这样才能保证 LESS 源文件正确编译解析。

 

less服务器端

LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前经常使用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就能够在 node 环境中对 LESS 源文件进行编译。 在项目开发初期，咱们不管采用客户端仍是服务器端的用法，咱们都须要想办法将咱们要用到的 CSS 或 LESS 文件引入到咱们的 HTML 页面或是桥接文件中，LESS 提供了一个咱们很熟悉的功能— Importing。咱们能够经过这个关键字引入咱们须要的 .less 或 .css 文件。 如： @import “variables.less”; .less 文件也能够省略后缀名，像这样： @import “variables”; 引入 CSS 同 LESS 文件同样，只是 .css 后缀名不能省略。

 

less使用编译生成的静态 CSS 文件

咱们能够经过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是彻底兼容 CSS 语法的，也就是说，咱们能够将标准的 CSS 文件直接改为 .less 格式，LESS 编译器能够彻底识别。