From getting started to mastering Less, explain the basic usage skills in detail!

Less (short for Leaner Style Sheets) is a backward compatible CSS extension language . , which extends the functionality of CSS (Cascading Style Sheets) and provides a more flexible and powerful style definition and management mechanism. By using Less, developers can write maintainable and reusable style code, and achieve complex style effects with concise syntax. This article will introduce the basic concepts and features of Less, and how it can be used to simplify the CSS development process. If you want to learn more, you can visit Rhino Book 's Less Chinese documentation .

Install

To install Less, you first need to ensure that the Node.js environment has been installed locally, and then run the following command to install Less into the system's global environment:

npm install less -g

After the installation is complete, you can run the command on the console lessc -v. If the relevant version information appears, it means that the installation has been successful.

Compile and run

In an IED editor such as Vscode, create a new file .less with a suffix of .

@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }

.lessAfter the file is created and filled in, the next step is lessc [option option=parameter ...] <source> [destination]to compile it into a file .csswith the suffix . For example, to compile index.less into index.css, use the following command:

lessc index.less index.css

After the compilation is complete, the file can be generated .css , as shown in the following figure for details:

basic usage

Variables

Declare @the variable with and use:

@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }

output:

#header { width: 10px; height: 20px; }

Learn more about variables...

Mixing (Mixins)

Mixins are a way to include (or mix in) a bunch of properties from one ruleset into another ruleset. So suppose we have the following classes:

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

We want to use these attributes in other rulesets, we just need to put the name of the class where we want the attribute, like this:

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

.bordered The properties of the class will now appear in #menu a and .post a . (Note that you can also use #ids as mixins.)

Learn more about Mixins...

Nesting

Less lets you use nesting or combine it with cascading. Suppose we have the following CSS:

#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }

In Less, we can also write:

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }

The generated code is more concise and mimics the structure of HTML.

You can also use this method to bundle pseudo-selectors with mixins. Here's the classic clearfix hack (clear float trick), rewritten as Mixins ( & representing the current selector parent):

.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }

Learn more about parent selectors...

Nested rules and bubbling

Can be nested like selectors @media or @supports etc. @ 规则（at-rule）At-rule is placed on top, and its relative order remains unchanged relative to 规则集other elements in the same, which is called bubbling.

.component { width: 300px; @media (min-width: 768px) { width: 600px; @media (min-resolution: 192dpi) { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { width: 800px; } }

output:

.component { width: 300px; } @media (min-width: 768px) { .component { width: 600px; } } @media (min-width: 768px) and (min-resolution: 192dpi) { .component { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { .component { width: 800px; } }

Operations

Arithmetic operators +, -, *, / can operate on any number, color or variable. When possible, arithmetic operators perform unit conversions before adding, subtracting, or comparing. The result of the calculation is based on the unit type of the leftmost operand . Units are ignored if the unit conversion is invalid or meaningless. Invalid unit conversion eg px to cm or rad to % conversion.

// 数字转换为相同的单位 @convert: 5cm + 10mm; // returns 6cm @conversion-2: 2 - 3cm - 5mm; // result is -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 结果是 4px // 带变量的示例 @base: 5%; @filler: @base * 2; // returns 10% @other: @base + @filler; // 结果是 15%

Multiplication and division do not convert numbers. In most cases this is meaningless, multiplying a length by a length yields an area, and CSS does not support specifying an area. Less takes the number as it is and assigns the explicitly declared unit type to the result.

@base: 2cm * 3mm; // 结果是6cm

You can also perform arithmetic operations on colors:

@color: (#224488 / 2); // 结果是#112244 background-color: #112244 + #111; // 结果是#223355

Of course, you may find Less's color functions more useful.

calc() special case

_Released in [v3.0.0] _

For compatibility with CSS, calc() Math expressions are not evaluated, but Math expressions inside variables and nested functions are evaluated.

@var: 50vh/2; width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))

Escaping

Escaping allows you to use any arbitrary string as a property or variable value. ~"anything" or ~'anything' is used as-is, except for interpolation .

@min768: ~"(min-width: 768px)"; .element { @media @min768 { font-size: 1.2rem; } }

The result is:

@media (min-width: 768px) { .element { font-size: 1.2rem; } }

Note that starting with Less 3.5, you can simply write:

@min768: (min-width: 768px); .element { @media @min768 { font-size: 1.2rem; } }

In Less 3.5+, many situations that previously required "quote escaping" are no longer required.

Functions

Less provides functions for converting colors, manipulating strings, and doing Math calculations. They are fully documented in the Less functions manual .

Using them is very simple. The following example uses the percentage function (percentage) to convert 0.5 to 50%, increases the saturation of the color by 5%, then sets the background color to be 25% brighter and rotated by 8 degrees:

@base: #f04615; @width: 0.5; .class { width: percentage(@width); // 返回 `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); }

See also: function reference

Namespaces and accessors

Not to be confused with CSS @namespaceor namespace selectors.

Sometimes you want to group mixins for organizational purposes or simply to provide some encapsulation. You can use Less to achieve this requirement more intuitively. Let's say you want #bundle to bundle some mixins and variables for later reuse or distribution:

#bundle() { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab { ...; } .citation { ...; } }

Now, if we want to #header a mixin .button classes in, we can do this:

#header a { color: orange; #bundle.button(); // 也可以写成 #bundle > .button }

Note: If you don't want the namespace (for example #bundle()) to appear in your CSS output, you can () add to the end of the namespace, ie #bundle .tab.

Maps

Starting with Less 3.5, you can also use mixins and rulesets as value maps.

#colors() { primary: blue; secondary: green; } .button { color: #colors[primary]; border: 1px solid #colors[secondary]; }

This will output the expected result:

.button { color: blue; border: 1px solid green; }

Scope

Scoping in Less is very similar to CSS. Variables and mixins are looked up locally first, and if not found, are inherited from the "parent" scope.

@var: red; #page { @var: white; #header { color: @var; // white } }

Like CSS custom properties, mixins and variable definitions do not have to be placed before the line that references them. Therefore, the following Less code is the same as the previous example:

@var: red; #page { #header { color: @var; // white } @var: white; }

Comments

Block styles and inline comments can be used:

/* 一个块注释s * 样式注释！ */ @var: red; // 单行注释 @var: white;

Importing

The import works mostly as expected. You can import .less the file and all variables in it will be available. For .less files, the extension is optional.

@import "library"; // library.less @import "typo.css";

Learn more about importing...

Summarize

The above introduces the basic use of Less, which can basically be used during the construction of the project. If you want to learn more, you can visit the Less Chinese document of Rhino Book .