This is the 8th day of my participation in Gwen Challenge

Writing in the front

Less before read a lot of articles, also wrote, but just remember some common usage, a lot of time and have to go to the Internet to find information just remember, so today I plan to review less, the installation, use, grammar these are recorded, recorded into the article, convenient follow-up access.

define

Less is a CSS preprocessing language, which can be compiled into CSS by the preprocessor. Less adds variables, mixins, functions and other functions, making up for the shortcomings of CSS and making it more convenient to write CSS

use

The first way is to introduce les.js

  1. Introduce les.js in HTML

    You can use CDN or download less and import it with script tags

    <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>/ / or<script src="less.min.js"></script>
Copy the code

  2. Import the written less file

    <link rel="stylesheet/less" href="index.less">
<script src="less.min.js"></script>
Copy the code

    Note: The link tag is introduced before the script tag, and the rel attribute is set to stylesheet/less

  3. Perform HTML

    Note that HTML should be run on a local server, not directly in the browser, otherwise there will be cross-domain problems;

Second way: Install dependencies

  1. Less is installed globally on node 
    npm install -g less  // You can also add less through YARN Global
Copy the code
  2. Execute at the command line 
    lessc index.less index.css
Copy the code
  3. Importing compiled HTMLindex.css

grammar

Variables

CSS if a color is used in more than one place, you have to define multiple times, if you need to change, also have to change multiple times, which is very inconvenient; Less supports variable writing, which defines the same values that are used more often and only needs to be changed once.

Declare variables starting with @

@width: 50px;
@color: red;
@bgColor: blue;

.div1 {
 width: @width;
 color: @color;
 background: @bgColor;
}
.div2 {
 width: @width;  // If you want to change width, just change the width defined above
 color: @color;
 background: @bgColor;
}

// less compiled
.div1 {
 width: 50px;
 color: red;
 background: blue;
}
.div2 {
 width: 50px;
 color: red;
 background: blue;
}

Copy the code

Hybrid (Mixins)

Encapsulate a type of style, can be directly called in other elements, reuse

// The style to reuse
.center(@width: 100px) {
  width: @width;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}
#div1 {
   / / call
  .center(a); }#div2 {
   // call, can pass the parameter
  .center(200px);
}
/ / the compiled
#div1 {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}
#div2 {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}
Copy the code

Nesting

CSS elements between the style is not nested, less extends this, can be nested with the same organizational structure of HTML write style, easy to find and modify nested with more than a symbol &, on behalf of the parent element reference

@color: red;
body {
  .header {
    color: @color;
  }
  .content {
    color: @color;
    .item {
      color: @color;
      &.item-1 {
        color: @color;
      }
      &2 - { // Note that only the parent name is used here
        color: @color; }}}.footer {
    color: @color; }}/ / the compiled
body .header {
  color: red;
}
body .content {
  color: red;
}
body .content .item {
  color: red;
}
body .content .item.item-1 {
  color: red;
}
body .content .item-2 {
  color: red;
}
body .footer {
  color: red;
}

Copy the code

Operations

Supports +, -, *, / operations

@width-200: 100px + 100px;
@width-50: 150px - 100px;
@width-10: 5px * 2px;

.div1 {
 width: @width-200;
}
.div2 {
 width: @width-50;
}
.div3 {
 width: @width-10;
}

/ / the compiled
.div1 {
  width: 200px;
}
.div2 {
  width: 50px;
}
.div3 {
  width: 10px;
}
Copy the code

Built-in Functions

Less has a lot of built-in functions to handle percentages, decimals, colors, and more

@width: 0.5;
@color: #fa0141;
div{
    width: percentage(@width); // returns `50%`
    color: saturate(@color.5%) // Increase color saturation by 5%
}

/ / the compiled
div {
  width: 50%;
  color: #fb0041;
}
Copy the code

Importing (Importing)

You can import other less files, you can also import CSS files, you can use the variables of the file and so on

import 'other.less'
import 'other.css'
Copy the code

Comments

Multi-line comments can use /**/, and single-line comments can use //

/* Multi-line comments */

// Single-line comment
Copy the code

Loop (Loop)

Less does not have a ready-made for loop, which is generally implemented by when + recursion;

Sample code:.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // Next call until @counter equals 0
  width: (10px * @counter); 
}

div {
  .loop(5); // call, pass parameter 5
}

/ / the compiled
div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

Copy the code

Condition judgment

Less doesn’t have an if else, you can use when, you can combine and or not or comma operators if you want

.width1(@width) when (@width > 200px) {
    width: @width;
    background: yellow;
}
// And both
.width2(@width) when (@width > 200px)  and (@width < 400px) {
    width: @width;
    background: red;
}
// not an operation
.width3(@width) when  not (@width > 200px) {width: @width;
    background: blue;
}
// the comma operator or operator, one of which is sufficient
.width4(@width) when  (@width > 100px), (@width > 200px) {width: @width;
    background: green;
}
.div1 {
  .width1(400px);
}
.div2 {
  .width2(300px);
}
.div3 {
 .width3(100px);
}
.div4 {
 .width4(150px);
}

/ / the compiled
.div1 {
  width: 400px;
  background: yellow;
}
.div2 {
  width: 300px;
  background: red;
}
.div3 {
  width: 100px;
  background: blue;
}
.div4 {
  width: 150px;
  background: green;
}

Copy the code

Inheritance (extend)

Extend is a pseudo-class that inherits the styles of the selectors it references and takes arguments from the selectors to be referenced;

.a {
  color: red;
  .b {
    color: green; }}.c {
  &:extend(.a);
}

/ / the compiled
// Write a and C together
.a..c {
  color: red;
}
.a .b {
  color: green;
}

Copy the code

conclusion

The above is a summary of the commonly used less syntax, I hope you have read some harvest.