Less是一门css扩展语言,也成为预处理器
Less
Less变量
变量没有特定的值,需改变。例如:颜色和数值等经常使用。
@变量名:值;
注意:
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感
@color:pink;
span {
background-color: @color;
}
div {
color: @color;
}
Less编译
本质上,Less包含一套自定义的语法及一个解析器,用户根据这些语法自己的样式规则,这些规则最终会通过解析器,生成相应的css文件。
我们需要把less文件编译为css文件。
less文件保存vscode会直接编译为css文件
Less嵌套
1.less嵌套:子元素的样式直接写到父元素里面
@color:pink;
div {
color: @color;
span {
background-color: @color;
}
}
2.如果遇到(交集/伪类/伪元素选择器),内存选择器需加&
内存选择器的前面没有&符号,则他被解析为父选择器的后代
如果有&符号,他就被解析为父元素自身或父元素的伪类
@color:pink;
div {
color: @color;
span {
background-color: @color;
::before {
color: blue;
}
}
}
Less运算(重点)
任何数字、颜色或者变量都可以参与运算。就是less提供了加(+)、减(-)、乘(*)、除(/)算数运算
注意:
运算符中间左右有个空格隔开,1px + 5
对于两个不同单位的值之间的运算,结果取第一个值的单位
如果两个值之间只有一个值有单位,则运算结果就取该单位
@border:5px;
div {
height: 200px - 59;
width: 200px / 2;
border: @border solid red;
}
rem适配方案
适配目标
让一些不能等比自适应的元素,达到当设备尺寸发生改变时,等比例适配当前设备
如何达到目标
使用媒体查询根据不同设备按比例设置html的大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配
在实际开发中使用
适配方案1 rem+less技术+媒体查询
1.我们首先选一套标准尺寸 750为准 */
2.用屏幕尺寸 除以 划分的份数,得到html中的文字大小,但是不同屏幕下得到的文字大小不同
3.页面元素的rem值 = 页面元素在750px下的值 除以 html中的文字大小
@media screen and (min-width: 320px) {
html {
font-size: 40px;
}
}
@media screen and (min-width: 630px) {
html {
font-size: 100px;
}
}
div {
height: 2rem;
width: 2rem;
}