CSS预处理语言~~Less安装与使用

1. 安装node.js

首先我们需要先安装node.js在安装Less
网址：http://nodejs.cn/download/

1.1 打开网址选择需要的版本下载

这里小编是win1064位 所以选择win10安装包(.msi)64位 根据自己的电脑配置选择需要的版本

1.2 打开下载的文件，进行安装

1.3 接受许可，下一步

1.4 路径默认就好，下一步

1.5 直接下一步

1.6 不需要安装工具，直接下一步

1.7 Install 开始安装

1.8 安装完成

1.9 打开cmd查看是否安装成功

	/* 在cmd 命令行中输入 */node -v

有版本显示，则安装成功！

2. 安装 Less

输入 npm install -g less 开始安装 Less

安装完成后，通过 lessc -v 查看是否安装成功

3. 编译

       本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
       所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。

  3.1 手动编译

    在命令行中输入 lessc xxx.less xxx.css，如下：

  3.2 安装 Easy Less 插件编译

只要保存一下Less文件，会自动生成CSS文件。

在Less文件中编写CSS代码

自动生成CSS文件代码

4. Less的基本用法

  4.1 变量

	语法:@变量名:值; @bgColor:red;@wrap: 120px;div{background:@bgColor;width:@wrap;height:@wrap;}

变量命名规范

1. 必须以@为前缀
2. 不能包含特殊字符
3. 不能以数字开头
4. 大小写敏感

  4.2 嵌套

	.box{width:100px;height:200px;background:pink;h3{font-size:20px;font-weight:bold;}li{float:left;}}

  4.3 运算

	@count:120;@bg:#666;div{width:@count - 20px;background: 999 - @bg;}

如果两个值之间只有一个值有单位，则运算结果就取该单位
对于两个不同的单位的值之间的运算，运算结果取第一个单位的值

  4.4 混合

	.box{width:200px;height:200px;border-top:2px solid red;background-color:red;}#content{.bt;#small{.bt;}}

  4.5 注释

	// 单行注释/* 多行注释 */

  4.6 引用其他Less文件

	@import "style.less";