跟我一起了解less（1）：hello less

先来简单的介绍一下：

预处理css也算是相对比较新的技术，它给css添加了变量、函数、逻辑运算等语法，让css看起来更像是一种变成语言了。当然了，外表是次要的，功能才是主要，预处理css在样式的编写上变得更加容易，更加简单，甚至更加方便，可能原本一篇几千行的css文件最多几百行就可以搞定。

在百度这几天的搜索中，目测比较常用的就是less和sass，所以这次就先以less为主题写个系列文摘。

那么接下来就先初步的了解一下less吧~~~

 

1、安装：

安装步骤官网上说的即复杂又简单的让人看不懂/(ㄒoㄒ)/~~

官网给出了3种方法：

方法一：用NodeJS的集成工具把less文件转化成css文件（这种方法最安全）

方法二：命令行执行less语法（没什么用）

方法三：引入less.js文件，用link标签像加载css文件一样直接加载less文件（我认为最简单的方法）

 

我直接讲方法三，css本来就是编写后即时渲染的，方法三也最符合css的编写流程。

http://lesscss.cn/ 这里下载less.js（这是less中文网，里面有详细的api，还可以进入GitHub下载源码）

 

加载方式如下图：

 

（注：中间注释掉的部分是less全局的环境变量，可以不加）

 

所以简单的来说就只有下面两行就可以了：

<link rel="stylesheet/less" type="text/css" href="./example.less" /><!-- 这是你要编写的less样式文件 -->

<script src="less/less.js"></script><!-- 这是要引入的less驱动文件 -->

 

但很多小伙伴和我一样，添加了这两行后发现less不好用，我总结一般有下面两个原因，也是注意点：

注意一：<link rel="stylesheet/less" type="text/css" href="./example.less" />（泛指less文件）必须要放在less.js（驱动文件）前面，保证less文件先被加载进来js才有可能读到这个文件。

注意二：用less脚本的网页必须要放在服务器下运行（因为js没有权限访问计算机本地的文件）

 

2、第一个less程序，hello less

 

下面是代码：

 

它被解析成下面的css：

 

是不是变简单了呢~~^_^