1.什麼是less?

　　LESS是一種動態樣式語言，屬於CSS預處理語言的一種，它使用類似CSS的語法，為CSS的賦予了動態語言的特性，如變數、繼承、運算、函式等，更方便CSS的編寫和維護。

2.語法

1）註釋：

// 只在less中顯示

/**/會在編譯好的css檔案中顯示

2）變數：

定義變數用@

3）混入：

不帶引數的混入：

mixin.less檔案：

@width:100px;
@height:200px;
@color:green;
.border {
    border:5px solid red;
}
.one {
    width:@width;
    height:@height
 
;
    background-color:@color;
    color: yellow;
    .border;
}

編譯後的css:

.border {
    border:5px solid red;
}
.one{
    width: 100px;
    height: 200px;
    background-color: green;
    color: yellow;
    border: 5px solid red;
    
}

在元件中使用：

<template>
    <div>
        <div class
 
="one">less不帶引數的混合</div>
    </div>
</template>

<script>
export default {
    data(){
        return{
        }
    },
}
</script>

<style lang="less" scoped>
    @import '../assets/less/mixin.less';
    .active{
        color:blue;
    }
</style>

結果: