This is the second day of my participation in the August Text Challenge.More challenges in August

introduce

Less is a CSS extension language (precompiled language) that makes CSS easier to maintain and extend. Less is developed based on JS. It is recommended to use Node to convert less files to CSS files instead of using less directly on the browser. Introducing less. Js to the front page adds to the browser’s burden of compiling against less.

Installing less Dependencies

Set NPM source as domestic Taobao mirror

npm config set registry https://registry.npm.taobao.org
Copy the code

Install less dependency support globally

npm install -g less
Copy the code

variable

Concept: Less allows developers to declare variables in a programming language-like manner to store data that is considered to be frequently reused in development (e.g., theme colors, commonly used header font sizes)

Syntax: @ Variable name: variable value;

Pay attention to

Less Support@ {variable}Form for string concatenation, the pattern can be applied inSelector, property name, and URLFor use on

2. Less supports itselfBasic operationMedium variables also support the basic + – * / % operation

Perform operations on any number, color, or variable. If possible, arithmetic operators perform unit conversions before adding, subtracting, or comparing. The unit type of the leftmost operand is used to calculate the result. If the unit conversion is invalid or meaningless, the unit is ignored. Invalid unit conversions such as px to cm or rad to % conversions.

// All operands are converted to the same unit
@conversion-1: 5cm + 10mm; // The result is 6cm
@conversion-2: 2 - 3cm - 5mm; // The result is -1.5cm

// Conversion is impossible against the incompatible units
@incompatible-units: 2 + 5px - 3cm; // The result is 4px

/ / with a variable
@base: 5%; 
@filler: @base * 2; // The result is 10%
@other: @base + @filler; // The result is 15%
Copy the code

Multiplication and division do not convert. Because neither of these operations makes sense in most cases, a length multiplied by a length yields a range, and CSS does not support specifying ranges. Less will operate as the number is and will specify an explicit unit type for the result of the calculation.

@base: 2cm * 3mm; // The result is 6cm
Copy the code

You can also do color arithmetic:

@color: # 224488 / 2; // The result is #112244
background-color: # 112244 + # 111; // The result is #223355
Copy the code

nested

Concept: Less provides the ability to use nesting instead of or in combination with nesting. In other words, relational selectors in less allow the use of nested syntax to merge selectors to reduce the amount of code

Suppose we have the following CSS code:

Switch tolessWe can write it like this

Pay attention to

Do not use id selectors to change styles during development. Id selectors are slow to traverse
Nested syntax can be nested at most 3 levels, too much nesting will affect CSS style traversal speed

.demo { 
    .test { 
        .small { 
            /* Stop nesting */ 
            .little {} // Error: the nesting level is too deep
        } 
        
        .little{} // It is recommended to place the internal selector outside}}Copy the code

Nested syntax selectors must be inBelow common propertiesAnd before the selectorOne blank line apart

.demo { 
    .test {} // Error: The nested style selector must be below the normal property
    width: 18px; 
} 

.demo {
    width: 18px; 
    // The selection must be preceded by a blank line interval
    .test {} // Ok 
}
Copy the code

Special characters in nested syntax&Represents the current parent selector itself, usually in this notationMerge false selectorsgrammar

5. Less Supports media queryNested syntax (bubbling)The nesting of media queries is used in the order in which they are nestedandThe connection

@import

Concept: Less can be used to import other LESS or CSS files using the @import keyword

Grammar:

@import "./tool.less" // Importing less files into less files can ignore the suffix
@import "./theme" // equivalent to @import "./theme. Less"
@import "./style.css" // The CSS suffix cannot be ignored in less files
Copy the code

Note: When less imports other less files via @import, it adds the internal code of the other less files to the current LESS file and escapes them into CSS files. Importing CSS files does not add the contents of the CSS file to the entire LESS file, only importing external CSS files from the compiled CSS file via @import.

Mixin

Mixin is a way of mixing a set of attributes from one set of rules into another set of rules. Suppose we define a class as follows:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
Copy the code

What if we want to use these attributes in other rule sets? No problem, we just need to enter the class name of the desired attribute as follows:

Code Example 1:

#menu a {
  color: # 111;
  .bordered(a); }.post a {
  color: red;
  .bordered(a); }Copy the code

Properties contained in the.bordered class would appear in both #menu A and.post A. (Note that you can also use #ids as mixins.)

Pay attention to

A rule set can accept multiple arguments, and any selector (except the label selector) can be interpreted as a rule set with no arguments (Default no arguments, code reference aboveThe sample a)

A rule set that accepts multiple parameters, and the rule set that accepts parameters is not compiled into a CSS fileSimilar to a function, passing parameters and then calling it, code referenceExample 2)

The parameters of the receiving rule set are allowed to ownThe default value(Code referenceExample 3)

Code Example 2:

// Demo receives two arguments @width @height. The rule set that receives the arguments will not be compiled to the CSS file
.demo(@width.@height) {
  width : @width;
  height: @height;
}

.box {
  .demo(19px.20px);
  color: blue;
}

/* After compiling */
// Demo will not be compiled into CSS
.box {
  width :19px;
  height: 20px;
  color: blue;
}
Copy the code

Code Example 3:

.demo(@width: 77px.@height: 55px) {
  width : @width;
  height: @height;
}

.box {
  .demo(a)// equivalent to.demo
}
/* After compiling */
.box {
 width : 77px;
 height: 55px;
}
Copy the code

Less does not allow an empty parameter before an existing parameter

A Mixin rule set can be used as a function specifically designed to undertake some special rule calculation

When the function

Concept: The judgment statement function in less is equivalent to if(), which takes a discriminant as an argument. When the discriminant is satisfied, the code in the WHEN statement takes effect

Syntax: selector when (@var = true) {CSS property set}

@age: 20;

.button when(@age < 18) {
 background-color: green;   
}

/* After compiling */
.button  {
 background-color: green;   
}
Copy the code

Less circulation

Concept: The less loop is similar to the JS while statement, in that it is a recursive function used in conjunction with the WHEN function and will stop when the discriminant of the WHEN function is not satisfied

.loop(@counter) when (@counter > 0) {
  width: (10px * @counter); // Set some properties
  .loop(@counter - 1)}div {
  .loop(5); // launch the loop
}
Copy the code

List

Concept: A list is a JS equivalent array of less data types used to hold multiple pieces of data, separated by Spaces or commas “,”

Grammar:

@list1: 1px solid #ccc; // This is a space-separated array
@list2: 1.2.3.4;// This is a comma-separated array
// There is no difference between using the list function provided by less
// But assigning them directly to the attribute values both of which are assigned as strings causes comma-separated arrays to preserve commas
.box {
    border: @list1;
    margin: @list2;
}

/* After compiling */
.box {
    border: 1px solid #ccc;
    margin: 1.2.3.4; // The comma remains after compilation
}
Copy the code

List API

length(@list)Returns theThe length of the array

@list: 1px, solid, #ddd;

.box {
    z-index: length(@list);
}

/* After compiling */

.box {
    z-index: 3;
}
Copy the code

extract(@list,@index)Returns theThe value corresponds to the value of the @index subscript(Less list index calculated from the beginning)

@arr : 2.3.6.8;

.box {
    z-index: extract(@arr.3);
}

/* After compiling */
.box {
    z-index: 6;
}
Copy the code

[case]

Array traversal using length and extract with loop

3. Range (@start,@end,@step) generates an array of specified ranges based on the arguments

@list: range(5) Range (1,5,1) => @list: 1, 2, 3, 4,5;
@list: range(5.8) Range (5,8,1) => @list: 5, 6, 7,8;
@list: range(5px.15px.5) // Start and end can contain units @list: 5px 10px 15px;
Copy the code

Each (@list, rule set): Iterates through the current array or maps with each argument and the rule set can access variables@index(Subscript of the current traversal item)@value(Current traversal item value)@key(Use the current traversal key in Maps)

Through the array

Traverse the maps

Note: the @index @value @key variable names of parameter 2 rule set in each method can be customized

@obj : {
  size: 18;
  type: 19;
  desc: 20;
}

each(@obj,. (@v.@k.@i){
.map-@{k} {
    z-index: @i;
    top: @v; }})Copy the code

Refer to the link

LessChinese website

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Basic usage of less

introduce

Installing less Dependencies

variable

nested

@import

Mixin

When the function

Less circulation

List

List API

Refer to the link

Basic usage of less

introduce

Installing less Dependencies

variable

nested

@import

Mixin

When the function

Less circulation

List

List API

Refer to the link

Related Posts

Find a quick way to build a blog

JS latest basic data type: BigInt

Fed up with JavaScript glitches, I ported the entire application to TypeScript