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

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;

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;

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

3. Multi-layer nested variable calculation;

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

我是box1
 
我是box2
 

##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!