1. Less is a dynamic style language, which belongs to the category of CSS preprocessor. It extends THE CSS language, adding variables, mixins, functions and other features, making CSS easier to maintain and expand. Less can be run on the client side, or run on the server side with the help of Node.js.

  2. Comments in less

    • In order to//Comments at the beginning will not be compiled into the CSS file
    • In order to/ * * /The comments for the package are compiled into a CSS file

  3. Variables in less

    • Declare a variable using @ :@ pink: pink;

      1. Use only as a normal attribute value: use @pink directly

      2. As a selector and attribute name: #@{selector value}

      3. As URL: @{URL}

      4. Lazy loading of variables (variables in LESS work only after they are all loaded)

  4. Nesting rules in less

    1. Basic nesting rules

    2. The use of ampersand (horizontal levels are joined by ampersand, with no Spaces between them)

  5. Mixing in less

    • Mixed definitions are explicitly specified in less rules, to be used. Is defined in terms of.

    • Blending is a way of introducing a set of attributes from one rule set to another

      1. Normal blending compiles to native CSS, making CSS files very large

      2. Mixing without output (double parentheses)

      3. Mixed reference with parameters Add values to the mixed reference; otherwise, an error will be reported

      4. Blending with parameters and default values. When blending references, if no value is added, the default value is used

      5. Mixing with multiple parameters

      6. Named parameter When a parameter is different from an argument, you can specify the value of the parameter name by passing the parameter to the argument

      7. Matching pattern calls are mixed with the same name and the first argument is @_

      8. Arguments pseudo-array of arguments, commonly used to abbreviate properties. Simplify the code

  6. Less operation

    • In less, you can add, subtract, multiply and divide.
    • The native CSS uses CACL for calculation

  7. #test{&:extend(.father)} #test:extend(.father){}

    • Will inherit in essence.fatherThe selector and #test are combined to form a selector used by the declaration block.fatherthe
    • All: inherits all sums.fatherAssociated declaration block
    • Remember that the parent class cannot be defined as a hybrid (inheritance is not flexible, high performance, hybrid is flexible, low performance)

  8. Less avoids compilation

    • ~” Content that will not be compiled”
    • Variables in LESS are block-level scoped and lazy-loaded