LESS简介及使用方法

1.动态样式语言

  静态样式语言：即CSS，作为一门“语言”，CSS并不称职，缺少一门编程语言必备的基本要素：如变量、数据类型、运算、逻辑结构、函数、继承等；导致样式文件的修改和维护困难！

  动态样式语言：在静态样式语言的基础上，添加了一门真正的语言所必需的元素：变量、数据类型、运算、逻辑结构、函数、继承等，从而大大提高样式的可修改和可维护性。

  常见的动态样式语言：

(1)Sass/SCSS

(2)Stylus

(3)Less

 

注意：浏览器只能解析标准的CSS样式语言！所有动态样式语言的源文件必需转换为css文件——这一过程称为动态样式语言的“编译(Compile)”。

 

2.动态样式语言——Less概述

  官网：http://www.lesscss.net/

  Bootstrap提供的Less使用手册：http://www.bootcss.com/p/lesscss/

  LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

  Less的语法基于CSS，为CSS添加了很多动态语言的特性。

  LESS源文件的两种使用方法：

  (1)在客户端使用.less源文件——仅供了解，不推荐使用

1)编写.less源文件；

2)在.html链接该文件

<link rel="stylesheet/less" href="css/1.less"/>

3)在.html中链接一个less.js文件——自调函数，是一个Less的编译器。

<script  src="less.js" type="text/javascript"></script>

  (2)在服务器端使用.less源文件——推荐使用

1)编写.less源文件

2)程序员在自己的开发电脑上运行一个Less编译程序，把.less编译为.css文件

3)编写.html文件，直接链接.css文件即可

 

 

3.在服务器端编译Less源文件的步骤——易出错！

  (1)下载并安装一个服务器端JS解释器：如NodeJS或Rhino

  (2)下载一个Less源文件的编译器lessc.js(省略了.js后缀)

  (3)使用JS解释器执行Less编译器，把.less文件转换为.css文件

1)方式1：手工在cmd中敲入命令来执行

  node d:/npm/node_modules/less/bin/lessc e:/1.less > e:/1.css

2)方式2：把lessc配置为WebStorm里的一个文件监视器(File Watcher)，监视.less文件的创建和修改，立即自动调用lessc编译器，生成.css文件

 

通过修改Bootstrap LESS源代码实现Bootstrap定制

  Bootstrap定制的三个目标：

  (1)瘦身：精简bootstrap.less中无用的@import，删除自己项目中无用的样式；

  (2)定制：修改variables.less其中定义的变量；

  (3)深度定制：修改每个组件对应的.less文件，设置其中的样式。

LESS介绍及其与SASS的差异：http://developer.51cto.com/art/201208/351463.htm