This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

LESS is a CSS preprocessor, which introduces variables, mixins, calculations, and functions based on the CSS syntax, greatly simplifying the writing of CSS and reducing the maintenance cost of CSS. This series is all about learning and consolidating the basics of Less and mastering some of the more advanced uses to improve development efficiency.

nested

You can nest another selector inside a selector to write styles;

🌺 Progeny selectors (common)

The nesting of descendant selectors is, you write a selector inside of a selector;

🌺 child element selector

A child selector is a child selector with a > in front of it

If you forget what is a descendant and what is a descendant, then go to the documentation 👉 CSS child element selector and CSS descendant selector

🌺 Parent selector (&)

🍀 peer class expression (.box.color)

tips

After the selector with no space, that is, the same class;

What is a peer class?

🍀 Pseudoclass expression (A :hover)

🍀 Generates a unified class name

Sometimes we want the class names to be uniform, such as the style of the button;

🍀 Multiple selectors

& represents all parent selectors (not just recent ancestors)

🌺 Media Enquiries

@media screen and (min-width:1080px){}

variable

You can define a single set of common styles to call, facilitating global style changes.

🌺 Attribute value variable (common)

This is the easiest and most common way to do it, such as when using global skin colors and CSS styles for common components;

“Writing”

// Declare @variable name: value // Use attribute: @variable nameCopy the code

🌺 Attribute name variable

// Declare @variable name: value // Use @{variable name}Copy the code

🌺 the entire property as a variable

// Declare @name: {attribute: value; } // Use @name(); // Just like the use methodCopy the code

🌺 selector variable

The name of the selector can also use a variable

// Declare @variable name: value // Use.@{variable name} #@{variable name}Copy the code

🌺 URL variables

// Declare @variable name: value // Use url("@{variable name}/ image name ") (note: variables are paths)Copy the code

Use of the 🌺 variable in the @import statement

// Declare @variable name: value // use @import "@{variable name}/ path name"Copy the code

The 🌺 variable is used as the variable name

You can use a variable to define the name of another variable

@color = primary; @ @ color = @ primary; @primary = lightblue;Copy the code

🌺 Lazy Evaluation and scope of variables

Variables do not need to be declared before use, but after use.

@width = @a = 60px; // You can see that the following variables overwrite the previously declared variables (the current scope is searched upwards); @height = @b = 50px; // If there is a local variable, it will be referenced first;Copy the code

Variable reference priority:

Local variable > following variable > preceding variable

Use the 🌺 attribute as a variable ($prop syntax)

Use $prop syntax to use properties as variables (new in V3.0.0)

The scope of this is the same as the scope of variables

🌺 Default variable

If you set a default value for a variable, you can override it later by redefining it;

“Note” if @base-color is defined and used in the library file;

@base-color: @base-color: @base-color: @base-color: @base-color

@dark-color @base-color @base-color @base-color @base-color

conclusion

Next up: less study guides the second phase of the | * * * * *

Less Variables

🏃♀️🏃♀️🏃 🏃 ♀ ️ 🏃 ♀ ️ 🏃 ♀ ️