less的基础学习

1.less的安装

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展

1. Less是建立在node.js上的,我们可以直接在终端全局安装
   $ npm install -g less

2. 安装好后,便可在终端进入css文件,并通过指令将less打包成css文件
   lessc ttt.less ttt.css
   ttt.less为写好的less文件,ttt.css为使用命令后自动打包生成的文件

3. 发现此时已经生成了css文件,通过link引入或者webpack打包就可以用了
   
   自然还有其他方法使用less,但个人觉得这个最好

2.less的写法

1. 变量
   less添加了变量,使less的使用更加便捷
   如:
   
2. 嵌套
   父元素与子元素可以嵌套在一起

ul{
      color:white;
		li{
				line-height:20px;
			}

3. 混合
   可以将一组属性从一个规则集包含（或混入）到另一个规则集

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.post a {
  color: red;
  .bordered();
}

同时也可以

.uuu{
	.ex{
		font-size: 20px;
	}
}

.post a {
  color: red;
  .uuu.ex();
}

4. 运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。

@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

5. 转义
   转义在 Less 中用的并不是很多，只有当代码不能被识别时，才需要使用转义，任何~"text"被编译成 CSS 代码后，都将显示为text