Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to install and use Less in Vue-cli, the content is detailed and easy to understand, easy to operate, and has a certain reference value, I believe you will have something to gain after reading this article on how to install and use Less in Vue-cli. Let's take a look.

I. installation

We can find a lot of information about less installation on the network, which is relatively simple. After we download and run it in the vue project, we enter the following code to install it in vue:

Npm install less less-loader-save-dev

We can see the dependencies of less in package.json in the vue project

Next, we find the webpack.base.conf.js file in the build directory and open the rules under module to write the following code:

{test: /\ .less $/, loader: "styleMurloader loaded CSSS Muslim loader lessened loader"}

If we don't have module and rules, we can add them ourselves, but there are generally some. If not, it means we may have installed the wrong vue-cli or found the wrong file.

Module: {rules: [{test: /\ .less $/, loader: "styleMurloaderloaderlesslyloader"}]}

After we have completed these steps, we can write lang= "less" on the style tag under the component file to indicate that the css is parsed with less syntax, and then we can do the actual operation of less.

II. Introduction to less grammar,

First of all, we need to know what less is before we know how to use it! For what is less, it is a css preprocessing language, extending the lcss language, adding variables, mixin, functions and other features, making css easier to maintain and extend.

1. Syntax variables

(1) in less, when we write the style, we need to add the background color to our elements. After considering it, we will modify the theme style. We can use the following method:

@ tabBar-red-style:#f00#tabBar {background:@tabBar-red-style}

The background of the element whose id is tabBar on the page will be displayed as # f00 and will be rendered normally. Later, if the abnormal product manager wants to change the color style globally, he can only change the removal variable and modify it globally.

(2) variables are defined by variable names:

@ message: "this is a string"; @ text: 'message';content: @ @ text

After the attribute content is the content of this is a string.

(3) usually when we write the css style, we will write the same class repeatedly, in fact, we can do this, the code is as follows:

.col-row-center {dispaly:flex; align-items:center; justify-content:center;} .message {.col-row-center} / equivalent to .message {dispaly:flex; align-items:center; justify-content:center;}

We define a class class and then call it in other class. This way we can also solve the problem of height loss of floating parent elements.

2. The method of mixed use when carrying parameters:

(1) the code with a parameter is as follows:

.border-radius (@ radius) {border-radius: @ radius;-moz-border-radius: @ radius;-webkit-border-radius: @ radius;} # tabBar {.border-radius (4px); / / you can write the desired value} .card {.card (6px);} in parentheses.

(2) the default code for setting the parameter is as follows:

.border-radius (@ radius:4px) {border-radius: @ radius;-moz-border-radius: @ radius;-webkit-border-radius: @ radius;} # tabBar {.border-radius (); / / if no value is passed, the default value will be passed in} .card {.card ();}

(3) do not write parameters to prevent hidden css code as follows:

.border-radius () {border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;} # tabBar {.border-radius (); / / No value is passed during parsing, and the .border-radius class will not appear in the css file, saving css space} .card {.card ();}

(4) @ arguments passes a large number of parameters, and the saving operation code is as follows:

.box-shadow (@ x: 0, @ y: 0, @ blur: 1px, @ color: # 000) {box-shadow: @ arguments;-moz-box-shadow: @ arguments;-webkit-box-shadow: @ arguments;} .box-shadow (2px, 5px)

3. Pattern matching

We change the default rendering of the mix based on the parameters passed in, as follows:

/ let .mixins behave differently according to different @ switch values. Mixin (dark, @ color) {color: darken (@ color, 10%);}. Mixin (light, @ color) {color: lighten (@ color, 10%);}. Mixin (@ _, @ color) {display: block;} / / run @ switch: light; .class {mixin (@ switch, # 888);}

What it means in our code is that when we are using .mixins, when the value in the @ switch position is dark, then apply the first .mixin, if it is light, then apply the second .mixin, the third @ _ is to accept that everything is worth matching, and the third can be used all the time.

So what we see in the css file should be the following code:

.class {color: # a2a2a2; display: block;}

4. Boot expression

(1) We match according to the expression, and the code is as follows:

The / / when keyword is used to define a pilot sequence (in this case there is only one pilot). Mixin (@ a) when (lightness (@ a) > = 50%) {background-color: black;}. Mixin (@ a) when (lightness (@ a)

< 50%) { background-color: white;}.mixin (@a) { color: @a;} //运行.class1 { .mixin(#ddd) }.class2 { .mixin(#555) } (2)、我们通用导引中可用的全部比较运算有： >

> = = =

< 10), (@a < -10) { ... } (4)、导引可以无参数，也可以对参数进行比较运算，代码如下： @media: mobile;.mixin (@a) when (@media = mobile) { ... }.mixin (@a) when (@media = desktop) { ... }.max (@a, @b) when (@a >

@ b) {width: @ a} .max (@ a, @ b) when (@ a < @ b) {width: @ b}

5. Nesting rules

Nested writing makes css look very layered and easy for browsers to parse.

(1) to write cascading styles in a nested way, here is how to write the relevant css:

# header {color: black;} # header. Logo {font-size: 12px;} # header. Logo {width: 300px;} # header. Logo: hover {text-decoration: none;}

Less code writing: (2) & symbols are used to write concatenated selectors, not descendant selectors. This is especially useful for pseudo-classes, such as hover and: focus

# header {color: black; .logo {font-size: 12px;} .logo {width: 300px; &: hover {text-decoration: none}

(2) the & symbol is used to write the concatenated selector instead of the descendant selector. This is especially useful for pseudo classes, such as: hover and: focus, the code is as follows:

.bordered {& .float {float: left;} .top {margin: 5px;}}

After parsing, it looks like this:

.bordered.float {/ / there is no space float: left;} .bordered .top {/ / there is a space in the middle margin: 5px;}

6. Operation

(1) any number, color or variable can participate in the operation. The code example is as follows:

@ base: 5% base-color Filler: @ base * 2 + @ filler: @ base + @ filler;color: # 888 / 4poliBackgroundMurray color: @ base-color + # 111

(2) less operation can distinguish between color and unit, the code is as follows:

@ var: 1px + 5; / / less outputs 6px// parentheses and also allows the use of width: (@ var + 5) * 2 solid black / can operate in compound attributes border: (@ width * 2) parentheses

7. Color function

(1) We can see in less that it provides a series of color operation functions, as follows:

Lighten (@ color, 10%); / / returns a color darken (@ color, 10%) that is 10% lighter than @ color; / / returns a color saturate (@ color, 10%) that is 10% darker than @ color; / / returns a color desaturate (@ color, 10%) that is 10% more saturated than @ color; / / returns a color fadein (@ color, 10%) that is 10% less saturated than @ color / / returns a color fadeout (@ color, 10%) that is 10% less transparent than @ color; / / returns a color fade (@ color, 50%) that is 10% more transparent than @ color; / / returns a color spin (@ color, 10) with 50% transparency; / / returns a color spin (@ color,-10) whose hue is 10 degrees higher than @ color / / returns a color mix (@ color1, @ color2) that is 10 degrees smaller than @ color; / / returns a color that mixes @ color1 and @ color2

8. Math function

Less provides a lot of convenience in this function:

Round (1.67); / / returns `2`ceil (2.4); / / returns `3`clients (2.6); / / returns `2`clients (0.5); / / returns `50% `

9. Scope

For scope, it is actually the same as js's scope. It will look for our variable under the current scope, and if it cannot find it, it will look for it in the parent element at the next level, as shown below:

Var: red;#page {@ var: white; # header {color: @ var; / / white}} # footer {color: @ var; / / red}

10. Annotation method

The comments in less follow the comfort of css, including those in js, as shown in the following example:

/ * Hello, Isima CSS-style comment * / .class {color: black} / / Hi, I'm a silent comment, I won't show up in your CSS.class {color: white}

11. Import mode

Here is a case study of our first pass import:

@ import "lib.less"; @ import "lib"

12. String interpolation

Our variables can be embedded in our characters with a string similar to the js template, as shown below:

@ base-url: "http://assets.fnord.com";background-image: url (" @ {base-url} / images/bg.png ")

13. Avoid compilation

We sometimes enter the wrong css or use some syntax that less does not recognize. When we output such a value, we can add the symbol "~" to the string to prevent the compiled value from being included with the symbol "", as shown below:

.class {filter: ~ "ms:alwaysHasItsOwnSyntax.For.Stuff ()";}

14. JavaScript expression

(1) the expression of JavaScript can be used in .less file, and we can use it in a reverse boot way, as follows:

@ var: `"hello" .toUpperCase () +'!'`; / / @ var: "HELLO!"

(2) We can also use string interpolation and avoid compilation at the same time, as follows:

@ str: "hello"; @ var: ~ `"@ {str}" .toUpperCase () +'!'`; / / @ var: HELLO!

(3) you can also visit our JavaScript environment, as follows:

@ height: `document.body.clientHeight`

(4) We can also use the color function to parse the JavaScript string into hexadecimal color values, as follows:

@ color: color (`window.colors.baseColor`); @ darkcolor: darken (@ color, 10%); this is the end of the article on "how to install and use Less in Vue-cli". Thank you for reading! I believe you all have a certain understanding of "how to install and use Less in Vue-cli". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.