1. Less is introduced

Less (short for Leaner Style Sheets) is a CSS extension language, also known as a CSS preprocessor.

As a form of extension of CSS, it does not reduce the functionality of CSS, but adds procedural language features to CSS on top of existing CSS syntax. Based on the syntax of CSS, it introduces variables, Mixini (mixed), operations and functions, which greatly simplifies the writing of CSS and reduces the maintenance cost of CSS. As its name suggests, Less allows us to do more with Less code. Less :http://lesscss.cn Common CSS preprocessors are Sass, Less, and Stylus

1.1 Less variable

@ Variable name: value;Copy the code

1. Variable naming conventions

  • Must be prefixed with @
  • Cannot contain special characters
  • You can’t start with a number
  • Case sensitivity

1.2 Less compilation

In essence, Less consists of a custom syntax and a parser that allows users to define their own style rules, which are eventually compiled into corresponding CSS files by the parser. So, we need to compile the LESS file into A CSS file so that the HTML page can use it. Vscode plugin: Easy Less after installing the plugin, as long as you save the LESS file, it will automatically generate CSS files.

1.3 Less nesting

	#header {
    	.logo {
        	width: 100px; }}Copy the code

Intersection | | pseudo class selector pseudo elements

  • If the inner selector is preceded by no ampersand, it is resolved as a descendant of the secondary selector;
  • If there is an ampersand, it is resolved to the parent element itself or to a pseudo-class of the parent element.
	a {
    	&:hover {
        	color: red; }}Copy the code

1.4 Less operation

Any number, color, or variable can be used. Less provides the arithmetic operations of addition (+), subtraction (-), multiplication (×), and division (/).

/*Less */ @width: 10px + 5; div { border: @width solid red; } /* Generated CSS */ div {border: 15px solid red; } /*Less */ width: (@width + 5) * 2;Copy the code

Note:

  • How to write multiplication (*) and division (/)
  • The 1px + 5 operator is separated by a space between the left and right
  • For an operation between the values of two different units, the resulting value takes the units of the first value
  • If only one value between two values has a unit, the result of the operation takes that unit

>>> Front-end learning path <<<