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;
  }
}