CSS预处理语言~~Less安装与使用_cnds安装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
1
2

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

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
5
6
7
8
9
10
11

变量命名规范

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

  4.2 嵌套

	.box{
		width:100px;
		height:200px;
		background:pink;
		h3{
			font-size:20px;
			font-weight:bold;
		}
		li{
			float:left;
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12

  4.3 运算

	@count:120;
	@bg:#666;
	div{
		width:@count - 20px;
		background: 999 - @bg;
	}
1
2
3
4
5
6

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

  4.4 混合

	.box{
		width:200px;
      	height:200px;
      	border-top:2px solid red;
      	background-color:red;
	}
  	#content{
      	.bt;
      	#small{
         	.bt;
     	}
	}
1
2
3
4
5
6
7
8
9
10
11
12

  4.5 注释

	
	// 单行注释
	
	/* 多行
	   注释 */
1
2
3
4
5

  4.6 引用其他Less文件

	@import "style.less";
1