less必知必会

Less 插件

Less 编译 vocode Less 插件；Easy LESS 插件用来把less文件编译为css文件

安装完毕插件，重新加载下 vscode。只要保存一下Less文件，会自动生成CSS文件。

less官方文档

less的中文官网

bootstrap中less教程

维护css弊端

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

• CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
• 不方便维护及扩展，不利于复用。
• CSS 没有很好的计算能力
• 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目

Less 介绍

概念：less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Mixin、函数等特性，使css更易维护和扩展。

常见的CSS预处理器：Sass、Less、Stylus

less 中使用calc 的时候注意

height: ~'calc(100vh - 90rpx)';

less既可以在客户端上运行，也可以借助Node.js在服务端运行。

npm install -g less

检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

1. less中的注释

以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

2. less中的变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

1. 作为普通属性值只来使用：@变量名:值;
   • 必须有@为前缀
   • 不能包含特殊字符
   • 不能以数字开头
   • 大小写敏感

@color: pink;
div {
	background: @color;
}

1. 作为选择器和属性名：#@{selector的值}的形式 ( 不常用 )

@m: margin;
div {
    @{m}: 10px;
}

@span: span;
@{span}{
   font-size: 12px;
}

1. 作为URL：@{url}

1. 变量的延迟加载

@var: 0;
.class: {
	@var: 1;
    .bras {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}
........................编译结果：
.class {
    one: 1;
}
.class .bras {
    three: 3;
}
........................解析：
首先在less里面的变量，都是在块级作用域里面的（一个{}代表一个作用域）
因为在less里面变量都是延迟加载的，它会等作用域里面的内容解析完毕，然后加载变量。
所以 three: 3;

3. less中的嵌套规则

1. 基本嵌套规则
2. 如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接；&的使用 ( **&代表平级 **)

div{
	background: red;
	span{
		background: blue;
		&:hover{
			background: pink;
		}
	}
}
................编译结果：
div {
	background: red;
}
div span {
	background: blue;
}
div span:hover {
	background: pink;
}

4 less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

1. 普通混合（不常用）
2. 不带输出的混合
3. 带参数的混合
4. 带参数并且有默认值的混合
5. 带多个参数的混合
6. 命名参数
7. 匹配模式
8. arguments变量（不常用）

普通混合，缺点：会编译到原生css里面，会使原生css文件变得很大！

.positions {
	position: fixed;
	top: 0;
	left: 0;
}

.box {
	width: 100px;
	height: 100px;
	.box1 {
		.positions;
		width: 10px;
		height: 10px;
	}
	.box2 {
		.positions;
		width: 20px;
		height: 20px;
	}
}
......................编译结果：
.positions {
	position: fixed;
	top: 0;
	left: 0;
}
.box {
	width: 100px;
	height: 100px;
}
.box .box1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
}
	
.box .box2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
}

• 不带输出的混合（编译结果：里面不再输出 .positions里面的样式）

.positions() {
	position: fixed;
	top: 0;
	left: 0;
}

.box {
	width: 100px;
	height: 100px;
	.box1 {
		.positions;
		width: 10px;
		height: 10px;
	}
	.box2 {
		.positions;
		width: 20px;
		height: 20px;
	}
}
......................编译结果：

.box {
	width: 100px;
	height: 100px;
}
.box .box1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
}
	
.box .box2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
}

• 带参数的混合

.juzhong(@w,@h,@c) {
	width: @w;
	height: @h;
	background: @c;
}

.box {
	width: 100px;
	height: 100px;
	.box1 {
		.juzhong(100px,100px,pink);
		font-size: 18px;
	}
	.box2 {
		.juzhong(200px,200px,blue);
		font-size: 16px;
	}
}
......................编译结果：

.box {
	width: 100px;
	height: 100px;
}
.box .box1 {
	font-size: 18px;
	width: 100px;
	height: 100px;
	background: pink;
}
	
.box .box2 {
	font-size: 16px;
	width: 200px;
	height: 200px;
	background: blue;
}

• 带参数并且有默认值的混合 或者 带多个参数的混合

.juzhong(@w:10px,@h:10px,@c:blue) {
	width: @w;
	height: @h;
	background: @c;
}

.box {
	width: 100px;
	height: 100px;
	.box1 {
		.juzhong(100px,100px,pink);
		font-size: 18px;
	}
	.box2 {
		.juzhong();
		font-size: 16px;
	}
}
......................编译结果：

.box {
	width: 100px;
	height: 100px;
}
.box .box1 {
	font-size: 18px;
	width: 100px;
	height: 100px;
	background: pink;
}
	
.box .box2 {
	font-size: 16px;
	width: 10px;
	height: 10px;
	background: blue;
}

• 命名参数

.juzhong(@w:10px,@h:10px,@c:blue) {
	width: @w;
	height: @h;
	background: @c;
}

.box {
	width: 100px;
	height: 100px;
	.box1 {
		.juzhong(@c:orange);
		font-size: 18px;
	}
	.box2 {
		.juzhong();
		font-size: 16px;
	}
}
......................编译结果：

.box {
	width: 100px;
	height: 100px;
}
.box .box1 {
	font-size: 18px;
	width: 10px;
	height: 10px;
	background: orange;
}
	
.box .box2 {
	font-size: 16px;
	width: 10px;
	height: 10px;
	background: blue;
}

• 匹配模式 （以三角形为例）

<link rel="stylesheet" type="text/css" href="index.css">

<div id="wrap">
    <div class="jsx">
        
    </div>
</div>

新建 triangle.less文件：
// 这里的 @w,@c 是自定义的
.triangle(@_,@w,@c){   
    width: 0px;
    height: 0px;
    overflow: hidden;
}

.triangle(left,@w,@c) {
    border-width: @w;
    border-style: dashed solid dashed dashed;
    border-color: transparent @c transparent transparent;
}

.triangle(right,@w,@c) {
    border-width: @w;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent @c;
}

.triangle(top,@w,@c) {
    border-width: @w;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent @c transparent;
}

.triangle(bottom,@w,@c) {
    border-width: @w;
    border-style: solid dashed dashed dashed;
    border-color: @c transparent transparent transparent;
}

新建 index.less文件:

@import './triangle.less';

#wrap .jsx {
   .triangle(left,40px,blue)
}

• arguments变量（不常用）

<link rel="stylesheet" type="text/css" href="index.css">

<div id="wrap">
    <div class="jsx">
        
    </div>
</div>

.border(@1,@2,@3) {
    border: @arguments;
}

#wrap .jsx {
   .border(1px,solid,pink)
}

扩展：

5. less中的运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;

• 乘号（*）和除号（/）的写法

• 运算符中间左右有个空格隔开 1px + 5

• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位

• 如果两个值之间只有一个值有单位，则运算结果就取该单位

6. less继承

性能比混合高，灵活度比混合低

 <link rel="stylesheet" type="text/css" href="index.css">
 
  <div id="wrap">
        <div class="inner">
            inner1
        </div>
        <div class="inner">
            inner2
        </div>
    </div>

新建mixin文件夹 / juzhong.less

.juzhong{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.juzhong:hover {
    background: red!important;
}

index.less文件中:

* {
    margin: 0;
    padding: 0;
}

@import './mixin/juzhong.less';

#wrap {
   position: relative;
   width: 300px;
   height: 300px;
   border: 1px solid;
   margin: 0 auto;
   .inner {
       &:extend(.juzhong all);
       &:nth-child(1) {
           width: 100px;
           height: 100px;
           background: pink;
       }
       &:nth-child(2) {
        width: 50px;
        height: 50px;
        background: deeppink;
    }
   }
}

7. less避免编译

让浏览器去计算：calc() 函数用于动态计算长度值

* {
    margin: 100 - 20px;
    padding: ~"calc(100px + 20)"
}