less 学习笔记

最近在学习使用less,由于刚开始接触，很多东西都不懂，现在把我学习过程中遇到的一些问题和解决方法记录下来和大家分享。

一、安装和使用

　　首先，VS2013中，自带Less文件的新建、编辑功能，动态提示也很不错，但是一个很大的遗憾是：VS无法对less文件进行编译，需要另外想办法。

　　大概的办法有几种：

　　1）下载less.js解析脚本并在我们的文件中引入这个脚本（引入脚本时必须放在引入的less文件之后）。这种方式虽然方便，但是是有弊端的，很影响效率，因为每次浏览器还需要根据解析脚本来解析less文件，然后才能使用。如果是在开发环境还可以这样做，但是如果是生产环境，那就会很影响效率，所以并不提倡这样。折衷的办法就是开发环境这样做，生产环境时先将less编译为css之后加入到项目中使用。

　　2）安装sublime text插件，这是一个功能比较强大的第三方编辑器，在安装了相关插件之后，它能实现保存时直接编译less文件为css文件，比用npm命令行编译要方便很多。

　　安装步骤：去官网下载sublime text,然后直接安装，安装完成后打开应用按CTRL+SHIFT+P，然后输入Insta,在下拉中选择Install Package(如果下拉中没有就直接回车来安装这个插件)，如下图所示：

　　

 

　　选择了Install Package之后会弹出以下的面板：

　　

 　  然后在输入框中输入less,在下拉框中选择Less安装，然后输入less2css，在下拉中选择less2css安装，测试sublime中的设置就完成了。但是这样还不够，还无法实现自动编译的功能，因为要实现自动编译的功能，需要依赖Node.js。

　   去node.js的官网下载，然后安装Node.js,安装完了之后需要确保nodejs已经添加到了系统的环境变量中，然后就可以在Dos命令行控制台安装less了；

　　安装步骤如下：

　   输入npm install -g less，这个运行会很慢（天朝，你懂的。。。），完成之后再继续执行 npm install -g less-plugin-clean-css，执行完之后就一切OK了。

　　最后，我要吐槽以下sublime的动态提醒功能，太渣了，我导入了less文件和我自己声明的变量都无法做提醒，还是VS中的提醒好用一些。所以我一般都在vs中编辑，在sublime 中编译。

二、Less语法

　　Less的语法还是比较简单易学的，具体这里就不多做介绍，给个传送门【Less中国的官网】：http://lesscss.cn/

三、常见问题解答

　　css3中-moz、-ms、-webkit、-o前缀分别代表什么呢？

　　-moz代表firefox浏览器私有属性。

　　-ms代表IE浏览器私有属性。

　　-webkit代表chrome、safari私有属性。

　　-o代表opera私有属性。

　　为什么要用这些前缀呢？由于CSS3的一些样式规范未定，如果浏览器在规范还未定是就支持了这些CSS样式，那么会加上前缀以示和规范的区别，随着CSS3的逐步完善和推广，浏览器也开始使用不用前缀的CSS3样式。、

　　不过为了兼容老版本，带前缀的样式仍然可用。