less的使用（變量、混入）

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>

結果:

 帶參數的混合：相當於js里面的函數

less文件：

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width:3px) {
    //帶默認值的
    border:@border_width solid red;
}
.fontColor(@font_color){
    //不帶默認值的
    color:@font_color ;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
}

使用：

<template>
    <div>
        <div class="div1 one">帶參數的混合</div>
    </div>
</template>

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

<style lang="less" scoped>
@import '../assets/less/mixin.less';
.div1{
    .border(1px);
    .fontColor(#fff);
}
</style>