# # introduction

What is the ghost of less often discussed in front circle of friends? Is it out of place that I don’t hear about front-end development? This blog will detail common uses of less for beginners.

## Learning less, Why?

1. Once you use it, you’ll find it’s much easier to use than native CSS. For example: can simplify a lot of repeated code, by defining global variables to facilitate future code maintenance.

2. Front end popular many UI frameworks such as Bootstrape (V4 before the version), iView and so on, CSS source are using less.

Prosperous wealth:"What's an example of how less can simplify a lot of repetitive code?"Q channel:"Reading the bootstrape source code, the button style is implemented in less syntax with 168 lines and written in CSS syntax with 439 lines."Copy the code

How do you start using ## less

Use javascript to parse less syntax in your browser. Less.min. js can be downloaded from the official website

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>less001</title> <! Attention -type="text/less"<style = "box-sizing: border-box! Important; word-wrap: break-word! Important;type="text/less">
	@width: 100px;
	@height: @width + 10px;

	.header {
	  width: @width;
	  height: @height;
	  background-color:red;
	}
</style>
</head>
 
<body>
	<div class="header"> 1234567890 </div> </body> <! The dependent less.min.js file must be placed after the less syntax to be parsed to be valid --> <script SRC ="./less.min.js"></script>
</html>Copy the code

Approach 2: Support the development tools themselves, such as Koala;

Method 3: Node.js? High-end gamers use this;

NPM install -g less Part 2: Lessc Name of the file to be compiled Lessc 001.less 001. CSS ``` ``` 001.less  @width: 100px; @height: @width + 10px; .header { width: @width; height: @height; background-color:red; }Copy the code

Use HTML files to introduce the compiled 001. CSS file to view the effect <! DOCTYPE html> <html> <head> <meta charset="utf-8">
<title>less003</title>
<link type="text/css" rel="stylesheet" href="./001.css" />
</head>
 
<body>
	<div class="header"> 1234567890 </div> </body> </ HTML >Copy the code

Method 4: Use the WebPack packaging tool

npm i less less-loader --save-devCopy the code

# # less variable

@color:red; @color:red; @selector: .header; @srcName: width; @{selector}{ @{srcName}: 200px; height: 200px; background-color:@color; } // This is the compiled code:.header {width: 200px; height: 200px; background-color: red; }Copy the code

Thus we need to know the following usage:

1. CSS syntax is supported in less files

2. How to declare a variable: @ variable name [e.g. @color]

3. Variable declarations are generally used for attribute values. For example, @color in the above example is used to declare the attribute value of background-color

4. Variables can also declare attribute names, selectors, etc. (but they are not usually used this way), using @{selector name} [example: @selector, @srcname]

## less

Header {height: 200px; } Compiled CSS file: /* Wrapped comments, compiled into CSS file */. Header {height: 200px; }Copy the code

1. Comments starting with // in less files are not compiled into CSS files

2. Less files, /**/ package comments, can be compiled into CSS files

Nested rules in ## less

// Assume the following HTML fragment <div class="header">
    <div class="nav">123</div>>
    <div class="logo">456</div>> </div> // The corresponding CSS code is:. Header {font-size: 12px; } .header .nav {float: left; background-color: red; } //.nav {// No. Header prefix //float: left;
//  background-color: red;
//}
.header .logo {
  float: left;
  width: 300px;
}Copy the code

The above code is nested, i.e. the nav and logo classes are subclasses of Header, but the code structure is not shown. If the class nav is not prefixed with the header, it is even more frightening

// Less code with nested rules:.header {font-size: 12px; .nav {float:left;
	  background-color:red;
  }
  .logo {
	  float:left; width: 300px; }}Copy the code

Feel it? Less allows you to write CSS code in the same way you write HTML structural code. There are two things to note when using nesting: the & represents the parent of the current selector; When you use a dummy element, if there is no specific selector in front of the dummy element, the compiler will have a space in front of the dummy element, and the style code will not take effect. In this case, you can add & before the dummy element.

//:hover, :after, :focus... Hover {background-color:green; hover {background-color:green; }Copy the code

The @ symbol is used to define variables in less syntax. However, in practice, the CSS syntax has a specific use of @. For example, @media indicates media query, which conflicts with less syntax. The less solution is to put the @ syntax of CSS before the other syntax at compile time as follows:

//less grammar. component {width: 300px; @media (min-width: 768px) { width: 600px; @media (min-resolution: 192dpi) { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { width: 800px; }} // Compiled CSS syntax. Component {width: 300px; } @media (min-width: 768px) { .component { width: 600px; } } @media (min-width: 768px) and (min-resolution: 192dpi) { .component { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { .component { width: 800px; }}Copy the code

## less

Prosperous wealth:"Didn't you say that using less can greatly simplify repetitive code? I look at the previous code why so much trouble?"Q channel:"The syntax is just paving the way, but less mixing is a powerful feature that promises to simplify the code."Copy the code

Blending works a bit like a function that can call a blending name and get a bunch of predefined rule properties without having to write duplicate code. The basic usage is as follows, let’s analyze one by one:

1. Mix basic use

2. Mixing without output

3. Mixed parameter usage

4. Add default values for mixed parameters

5. Name parameters

6. Match patterns

// The basic use of the mixture // assume the following code:.div1 {float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}
.div2 {
  float: left; width: 200px; height: 200px; background-color: red; } // This is the same code except for the background color, so we can achieve the same goal. Less-mixins {float:left; width:200px; height:200px; } .div1{ .less-mixins; background-color:green; } .div2{ .less-mixins; background-color:red; } // Final compiled CSS code.less-mixins {float: left;
  width: 200px;
  height: 200px;
}
.div1 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}
.div2 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}
Copy the code

The basic use of the mixture is as follows:

A. Defining mixins as. Less-mixins, does it feel like defining classes

B. The mixing mode of reference definition is. Less-mixins, that is, simply write the class name

C, no doubt, you read that correctly, the compiled CSS code also contains less-mixins.

//2. The hybrid //less code without output is changed to the following:.less-mixins() {float:left; width:200px; height:200px; } .div1{ .less-mixins; background-color:green; } .div2{ .less-mixins; background-color:red; } // Finally compiled CSS code.div1 {float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}
.div2 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}Copy the code

Compared to the above case, all that has changed is that a pair of little brackets have been added after the mixed name, and compiling the less file again will not include invalid mixed definitions in the resulting CSS file

Less-mixins (@width,@height,@color){float:left; width:@width; height:@height; background-color:@color; } .div1{ .less-mixins(200px,200px,yellow); } .div2{ .less-mixins(200px,300px,green); } // Compiled CSS file.div1 {float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.div2 {
  float: left;
  width: 200px;
  height: 300px;
  background-color: green;
}Copy the code

The above (@width,@height,@color) parameters are defined as function parameters. These parameters can be used inside the mixture, just like calling a function in JS syntax

Less-mixins (@width:100px,@height:100px,@color:red){//4.float:left; width:@width; height:@height; background-color:@color; } .div1{ .less-mixins(200px,200px,yellow); } .div2{ .less-mixins(); } // compiled css.div1 {float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.div2 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}Copy the code

Add mixed parameter defaults, just add: default after the variable name. But have you found any problems, what if I only pass in one argument when I call the blend? Or what if the input parameter is less than the argument? See the following:

Less-mixins (@width:100px,@height:100px,@color:red){//5.float:left; width:@width; height:@height; background-color:@color; } .div1{ .less-mixins(200px,200px,yellow); } .div2{ .less-mixins(@color:green); } // compiled css.div1 {float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.div2 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: green;
}Copy the code

Less mixins(@color:green) to specify which argument I want to pass in.

Less-mixins (L,@width:100px,@height:100px,@color:red){float:left;
	width:@width;
	height:@height;
	background-color:@color;
}

.less-mixins(R,@width:100px,@height:100px,@color:red){
	float:right; width:@width; height:@height; background-color:@color; } div1{.less-mixins(L,200px,200px,yellow); div1{.less-mixins(L,200px,200px,yellow); } .div2{ .less-mixins(R,@color:green); } // Compiled CSS file.div1 {float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.div2 {
  float: right;
  width: 100px;
  height: 100px;
  background-color: green;
}Copy the code

Mix. Less – mixins defines two times, the two functions in addition to the direction of the floating inconsistent other are the same (of course here can also be defined as two variable name), this situation is to distinguish between the definition of hybrid calls, the need to be mixed in the call, specify the first parameter matching as a string.

# # less computation

@width: 10px; @width: 10px; @height: @width + 10px; .header { width: @width; height: @height; } // Compiled CSS code. Header {width: 10px; height: 20px; }Copy the code

The less syntax supports computation, requiring only one unit of variable. Like the CALc function of CSS’s own syntax, the calC function evaluates when the browser itself runs CSS code.

# # less inheritance

The function of less mixing is to copy a bunch of attributes and values, attributes and values can be variables, callers can pass parameters according to their own needs; Inheritance in LESS copies a bunch of attributes and values, but the attributes and values are constants. All inheritors obtain the same attributes and values and cannot pass parameters. Using inheritance is the same as the basic use we mixed up before, but the call is different. Here’s an example:

// The definition is mixed as follows:.less-mixins() {float:left; width:200px; height:200px; } .div1{ .less-mixins; background-color:green; } .div2{ .less-mixins; background-color:red; } // Compiled CSS result.div1 {float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}
.div2 {
  float: left; width: 200px; height: 200px; background-color: red; Div1,.div2 {//.div1,.div2 {//.div1,.div2 {//.div1,.div2;float: left; width: 200px; height: 200px; } .div1 { background-color: green; } .div2 { background-color: red; } // Use inheritance syntax to rewrite less code. Less-mixins {float:left;
	width:200px;
	height:200px;
}

.div1{
	&:extend(.less-mixins);
	background-color:green;
}

.div2{
	&:extend(.less-mixins);
	background-color:red;
}Copy the code

The use of inheritance is summarized from this case:

1. Use the following methods: inheritor :extend (defined inheritance name)

2. Inheritance is defined and blended the same, but without parameters (with parameters, all inheritors cannot obtain the same attributes)

3. Pay attention to the inheritance of all attributes (such as pseudo-class selector), using the method: inheritor :extend (defined inheritance name all), see the following example:

//less code // Notice the addition of :hove style. CSS code will not include :hove style.less-mixins{//less code // Notice the addition of :hove style. CSS code will not include :hove style.less-mixins{float:left; width:200px; height:200px; } .less-mixins:hover{ font-size:20px; } .div1{ &:extend(.less-mixins all); background-color:green; } .div2{ &:extend(.less-mixins all); background-color:red; } // Compiled CSS code.less-mixins,.div1,.div2 {float: left;
  width: 200px;
  height: 200px;
}
.less-mixins:hover,
.div1:hover,
.div2:hover {
  font-size: 20px;
}
.div1 {
  background-color: green;
}
.div2 {
  background-color: red;
}
Copy the code

# # less import

Importing a CSS file:

@import “file name “; Importing less files:

@import “file name “; Note that the extension of less can be omitted

@import "002.css";
@import "002";Copy the code

## less scope and lazy loading matters

@width: 200px; .header { @width: 300px; div { color: @width; }} // The compiled CSS code. Header div {color: 300px; }Copy the code

Scope note: if the same variable is defined twice, the inside variable definition takes effect, meaning that the value of the variable takes precedence over the inner scope.

Header {div {color: @width; //less code // notice the position of @width variable. } } @width: 200px; // Render. Header div {color: 200px; }Copy the code

Lazy loading: We can use variables first and define them later

# # function

Less provides a number of functions to calculate the value of the CSS property, for example:

//less code. Header {color: RGB (90, 129, 32); } // CSS code. Header {color:#5a8120;
}Copy the code

# # the conclusion

It’s a bit wordy, but who knows what you’ll encounter on the job and how the interviewer will feel?