Categories
Uncategorized

Vue how to use less

Recently I found a lot of small partners in the course of the interview will be asked vue how to use less and scss, so I definitely update, review the less; ado directly into the theme;

Reliance Download

1, the first to use npm download dependence;

npm install --save less less-loader

 

2. After installation check that the installation was successful;

lessc -v

  

3. If the installation is successful, it will display the installed version of success;

 

Reference Methods

1, in main.js

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

2, and then create a file .vue we started to play a;

Note: Independent vue documents necessary to introduce less


 

start using

1, the use of less variable;

In the less, it allows us to use in the form of a variable is defined, define the way: @k: v; use: @k;

In this case there will be a wide 100px, 100px high, red background of squares displayed on the page;

 

2, string concatenation variable use;

Note: The path need to use “” package, @ {img} that all the variables introduced to take effect;

 

3, nested + variable calculation;

We can see, less can be nested, so that we can see a css structure; in addition to nest, have not found his calculation is the real strong place?

 

 

4, the mixing function =

我是box1
我是box2

  

 

5, matching pattern

//定义的css

matching box is t (top), i.e. the

 

matching box b (buttom), is the next;

 

To sum up matching pattern is like js switch statement, entered what is on display; but with what it feels;

7, color functions

默认红色

默认绿色

  • 测试
混合

  

 

8, the operator

May be calculated for height, width, angle;

  • {{item}}

  

 

If you feel good please little finger, focus our public, which I will share with you a long front-end basics of points;

 

Leave a Reply