移动端常见布局-Less

维护css的弊端
css是一门非程序语言，没有变量、函数、SCOPE（作用域）等概念
● css需要书写大量看似没有逻辑的代码，css冗余度比较高
● 不方便维护及拓展，不利于复用
● css没有很好的计算能力
Less介绍
Less是一门css扩展语言，也称为CSS预处理器
作为CSS的一种形式的扩展，并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序语言的特性
在CSS的语法基础上
在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，简化了css的编写，并降低了css的维护成本。
总结：Less是一门CSS预处理语言，它扩展了CSS的动态性
常见的CSS预处理器：Sass、Less、Stylus
Less使用
首先新建后缀名为less的文件，在这个less文件里面书写less语句
● Less变量
● Less编译
● Less嵌套
● Less运算
Less变量
变量是指没有固定的值，可以改变的，在CSS中的一些颜色和数值等经常使用
语法：

@变量名：值；

变量名规范
● 必须有@为前缀
● 不能包含特殊字符 例：@color~@#
● 不能以数字开头 例：@1color
● 大小写敏感 例：@color和@Color是俩个不同的变量
使用：

//定义一个粉色的变量
@color:pink;
@font14:14px;
div{
	background-color:@color;
	color:@color;
	font-size:@font14
}

Less编译
Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，规则最终会通过解析器，编译生成对应的CSS文件。
因此，还需要把less文件，编译生成为css文件，这样html页面才能使用
vocode Less插件
Easy LESS 插件用来吧less文件编译为css文件
安装完毕插件，重新加载vscode
Less嵌套
less嵌套写法：

//less嵌套 子元素的样式直接写到父元素里面
#header{
	.logo{
		width:300px;
	}
}
//伪类、交集选择器、伪元素选择器，需要加&符号，如不加则被解析为父选择器的后台
.nav{
    a{
        color:#333;
        &:hover{
            color: 999;
        }
    }
    &::before{
        content: "";
    }
}

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

//Less 写法
@width: 10px + 5;
div{
	border:@width solid red
}
/*生成的css*/
div{
	border：15px solid red;
}
// -------------------------------------
div{
	width:(@width + 5) * 2
}
/*生成的css*/
div{
	width: 40px;
}
// -------------------------------------
div{
	background:#666 - #222
}
v
div{
	background:#444
}
// -------------------------------------
@baseFont:50px;
img{
	width:82rem / @baseFont;
	height:82rem / @baseFont;
}
/*生成的css*/
img {
  width: 1.64rem;
  height: 1.64rem;
}

注意：
● 乘号（*）和除号（/）的写法
● 运算符中间左右有个空格隔开1px + 5

//俩个数参与运算，如果只有一个数有单位，则最后的结果就依这个单位为准
@width: 10px + 5;
div{
	border:@width solid red
}

//俩个数参与运算，如果俩个数都有单位，且俩个数的单位不同，最后的结果以第一个单位为准
@baseFont:50px;
html{
	font-size:@baseFont
}
img{
	width：82rem  / @baseFont；
	height：82rem  / @baseFont；	
}