less

Easy LESS 插件(vscode)

保存less文件会自动生成css文件

 

 

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

2.对于两个不一样的单位的值运算，运算结果取第一个的单位

3.若是两个值只有一个值有单位，结果取该单位

 

less嵌套

若是碰见交集，伪类，伪元素选择器

内层选择器的前面没有&符号，则被解析为后代

若是有&符号，它就会被解析为父元素自身或者父元素的伪类

 

common.less

html {
  font-size: 50px;
}


//划分的份数为 15
@no: 15;

//320
@media screen and (min-width: 320px){
  html {
    font-size: 320px / @no;
  }
}

//360
@media screen and (min-width: 360px){
  html {
    font-size: 360px / @no;
  }
}

//375
@media screen and (min-width: 375px){
  html {
    font-size: 375px / @no;
  }
}

//384
@media screen and (min-width: 384px){
  html {
    font-size: 384px / @no;
  }
}

//400
@media screen and (min-width: 400px){
  html {
    font-size: 400px / @no;
  }
}

//414
@media screen and (min-width: 414px){
  html {
    font-size: 414px / @no;
  }
}

//424
@media screen and (min-width: 424px){
  html {
    font-size: 424px / @no;
  }
}

//480
@media screen and (min-width: 480px){
  html {
    font-size: 480px / @no;
  }
}

//540
@media screen and (min-width: 540px){
  html {
    font-size: 540px / @no;
  }
}

//720
@media screen and (min-width: 720px){
  html {
    font-size: 720px / @no;
  }
}

//750
@media screen and (min-width: 750px){
  html {
    font-size: 750px / @no;
  }
}