1、npm i less --save-dev 把less源碼安裝到開發環境
/* less文件是通過less.loader.js 來編譯成css最后加載到頁面中的 */
2、npm i less-loader@6 --save-dev 安裝less解析器 （★一定要指定版本）
3、lessc -v 查看版本
4、在main.js? import less from 'less'? Vue.use(less)
5、獨立的vue文件需要引入less <style lang="less"></style>
less中變量的使用 定義方式：@key:value; 使用方式：@key;
字符串拼接變量使用方式 @img:'./img/'; background:url("@{img}1.png")
寫減法的時候左右要加空格，否則會理解為杠-
多層嵌套+變量計算；
<div class="box1">
? ? <div class="box2">
? ? ? ? <div class="box3"></div>
? ? </div>
</div>
<style lang="less">
@k:100px;
.box1{
? ? width: @k;
? ? height:@k;
? ? background: red;
? ? .box2{
? ? ? ? width: @k/2;
? ? ? ? height:@k/2;
? ? ? ? background: green;
? ? ? ? .box3{
? ? ? ? ? ? width: @k/3;
? ? ? ? ? ? height:@k/3;
? ? ? ? ? ? background: blue;
? ? ? ? }
? ? }
}
</style>
混合 = 函數
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<style lang="less">
//定義一個函數；
.test(@color:red,@size:14px){
? ? background: @color;
? ? font-size:@size;
}
.box1{
//? 不傳參，使用默認的；
? ? .test()
}
.box2{
//? 給函數傳參；
? ? .test(@color:green,@size:30px)
}
</style>
運算符
可以對高度、寬度、角度進行計算；
<ul>
? ? <li v-for="item in 4">{{item}}</li>
</ul>
<style lang="less" scoped>
? @k:10px;
? ? ul{
? ? ? ? list-style: none;
? ? ? ? ? li{
? ? ? ? ? ? ? border:1px solid ;
? ? ? ? ? ? ? margin:10px 0 ;
? ? ? ? ? }
? ? ? ? ? ? li:nth-child(1){
? ? ? ? ? ? ? ? width: @k + @k;
? ? ? ? ? ? ? ? height:@k;
? ? ? ? ? ? }
? ? ? ? ? ? li:nth-child(2){
? ? ? ? ? ? ? ? width: @k -5px;
? ? ? ? ? ? ? ? height:@k;
? ? ? ? ? ? }
? ? ? ? ? ? li:nth-child(3){
? ? ? ? ? ? ? ? width: @k * @k;
? ? ? ? ? ? ? ? height:@k;
? ? ? ? ? ? }
? ? ? ? ? ? li:nth-child(4){
? ? ? ? ? ? ? ? width: @k / 2;;
? ? ? ? ? ? ? ? height:@k;
? ? ? ? ? ? }
? ? }
</style>
