How can vue.js use less

vue.js can use less methods: 1. In less, we are allowed to define it in the form of variables. The definition method [@k:v;] and the usage method [@k]; 2. String Splice variables.

The operating environment of this tutorial: windows10 system, vue2.5.2, this article is applicable to all brands of computers.

[Related article recommendations: vue.js]

vue.js can use less methods:

Dependency download

1. First use npm to download the dependencies;

npm install --save less less-loader

2. After the installation is completed, check whether the installation is successful;

lessc -v

3. If After the installation is successful, the version after successful installation will be displayed;

Reference method

1. In main.js

import less from 'less'
Vue.use(less)

2. Then create a .vue file and let’s start playing;

Note: The independent vue file needs to introduce less

<style></style>

Get started

1. The use of variables in less;

In less, we are allowed to use variables to define, Definition method: @k:v; Usage method: @k;

<div></div>
 
<style>
@color:red;
@k:100px;
.box{
width:@k;
height:@k;
background: @color;
}
</style>

At this time, a square with a width of 100px, a height of 100px and a red background will be displayed on the page;

2. How to use string splicing variables;

<div></div>
 
<style scoped>
@img:&#39;./img/&#39;;
@k:100px;
.box1{
    width:@k;
    height:@k;
    background:url("@{img}1.png")
}
</style>

Note: the path needs to be wrapped with "", @{img} will only take effect if the variable is introduced;

3. Multi-layer nested variable calculation;

<div>
    <div>
        <div></div>
    </div>
</div>
 
<style>
@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>

As you can see, less can be nested, allowing us to see the css structure clearly at once; in addition to nesting After using it, have you found that its calculation is really powerful?

4. Mixed = Function

<div>我是box1</div>
<div>我是box2</div>
 
<style>
//定义一个函数；
.test(@color:red,@size:14px){
    background: @color;
    font-size:@size;
}
.box1{
//  不传参，使用默认的；
    .test()
}
.box2{
//  给函数传参；
    .test(@color:green,@size:30px)
}
</style>

##Related free learning recommendations:

JavaScript(video)

The above is the detailed content of How can vue.js use less. For more information, please follow other related articles on the PHP Chinese website!