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'

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 =




5, matching pattern


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