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>