认识less和webstrom的less配置
今天完成的事情：
首先第一件事情是，整理一下常用的颜色摄取
#F1F1F1 google的设置页面的body的背景颜色
#FFF 为google的内容块的背景颜色
另外就是学习test11中提到的less
一。跳出less和sass的战斗。网上一大堆的互相撕逼，看来各有春秋啊！但是对我这菜鸟的人说，我不管它们的得失。我只管知道预处理是一个好主意，管它是那种。
都是为了偷懒，不就是要让css更加自能化吗！
在知乎上有位“海皮飞”的博主提出了如下场景。
1. 要做各种内核都兼容的圆角效果，这个CSS效果是有固定模版的，那每个用到圆角的地方都复制一遍同样的代码的话，那如果圆角有一天都要改得更加圆一些怎么办？这个时候是不是可以把这些模版封装起来会比较好？
2. 网站每个地方都要用同一种红色怎么办？ 是要`#E7253D...#E7253D...#E7253D...#E7253D`，还是要`$red: #E7253D; $red...$red...$red`
作者：海皮飞
一位实际开发的博主给出的看法是less可以方便模块化和调用。
但是就算不用看，也知道要编译，那么对一个项目来说是增加额外的花销。
正题：
怎么使用less开发呢？
客户端运行Less分为两种情况：
第一种方式是直接在html页面引用.less文件，然后借助less.js去编译less文件动态生成css样式而存在于当前页面，这种方式适用于开发模式。
第二种方式是我们首先写好.less文件的语法，然后借助工具生成对应的.css文件，然后客户端直接引用.css文件即可。比如我们常用的bootstrap.css就是通过工具编译而成，这种方式更适合运行环境。
截图出自知乎
一。开发模式下使用Less
还真多人不提倡引入js文件。
不过也要说一下
1.搭建less环境
引入脚本less.js.
<link rel="stylesheet/less" type="text/css" href="less/styles.less">
<script src="js/less.js" type="text/java script"></script>
ps:第一行的意思是：less样式文件
第二行的意思是：引入处理器，实现浏览器将less预编译为css样式。
这可是在less开源地址下载less.js文件引入的。
可以直接在CDN方式引入less.js
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
在网文中还有这种代码实现自动刷新功能。
更有效的方式是通过如下代码监测less样式，自动编译为css样式，从而减少我们修改less代码后需按F5后才看到实际效果的繁琐步骤。
<script>less = { env: 'development'};</script>
<script src="js/less.js"></script>
<script>less.watch();</script>
也有人说明在引用less.js之前，需要一个less变量，声明编译less的环境参数，所以最终所有引用文件如下：
<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />
<script type="text/java script">
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
二。运行环境下使用Less
上图评论中都在介绍软件Koala。但是我是使用webstrom来敲代码的。那么可否通过配置webstrom来实现less生成对应css文件呢？
Windows10 x64 系统下安装 Nodejs 并在 WebStorm 2017.1 下搭建编译 LESS 环境
1、 打开Nodejs官网http://www.nodejs.org/，点“DOWNLOADS”
2、 下载好后，双击“node-v6.11.2-x64.msi”，默认安装路径为：C:\Program Files\nodejs。而我的是F:\Program Files (x86)\nodejs
3、 “开始”-->cmd,打开cmd程序，输入“node -v”,出现” v6.11.2”; 输入“npm -v”,出现” 3.10.10”,说明Nodejs和npm都已安装成功。
4、“开始”-->cmd,打开cmd程序，输入“cd F:\Program Files (x86)\nodejs”,进入nodejs安装目录。输入npm install less -g 回车，安装less组件。稍等片刻，完成后，你会发现C:\Users\bond\AppData\Roaming\npm\node_modules 目录下有less组件。
至此Windows7 x64系统下安装Nodejs及配置less组件已基本完成，接下来我们配置WebStorm 2017.1，使其能将less文件编译成css文件。
6、File-->Settings,打开设置选项。找到“External Tools”扩展工具设置项，点开右侧的“+”，在Name栏输入“LESS”，“Tool settings”分别输入如下：
F:\Program Files (x86)\nodejs\node.exe
C:\Users\bond\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$ $FileDir$\$FileNameWithoutExtension$.css
F:\Program Files (x86)\nodejs
7、在Settings 面