Less is also a CSS preprocessing language, which extends the CSS language, adding variables, mixins, functions and other features, making CSS easier to maintain and expand. Less can run on Node or in a browser.
Less installation and compilation
NPM install less -g // NPM install less --save-dev // Check less-vCopy the code
Writing less code
// index.less
@success: green;
.box {
color: @success;
}
Copy the code
Command line compilation
// Lessc index.less index.css is recommendedCopy the code
For the introduction of Less in the project, we can refer to the application of Sass in Vue. The idea of introduction and application is the same, but the syntax is different. Here’s a quick look at the introduction of less in Vue:
vue create my-project
npm i -D less-loader less
Copy the code
Second, core grammar
variable
Variable declaration symbol @
@blue: #5B83AD;
#header {
color: @blue;
}
Copy the code
Less provides the ability to use nesting instead of or in combination with cascading. Another idea in nested rules is called scope, and scope in Less is very similar to the concept of scope in programming languages. Variables and blends are first looked for locally; if not, the compiler looks for them in the parent scope, and so on. And variables and blends do not have to be declared before use.
@var: red;
#a{
#b{
color: @var; // The result is white
}
@var: white;
}
Copy the code
The import
You can import a.less file and use all the variables in the file without the extension.
@import "library"; // library.less
@import "typo.css";
Copy the code
annotation
Block (multi-line) comments and line comments can be used, and like Sass, line comments are hidden after compilation.
Mixing and operation
Blending is a way of introducing a set of attributes from one rule set to another. To use blending, access the name of the class of the desired attribute inside another rule set.
.a{ color: green }
.b {
.a;
font-size: 40px
}
Copy the code
Any number, color, or variable can be manipulated. Less can infer differences between colors and units. If units are used in an operation, Less automatically calculates the units.
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: # 888 / 4;
font-size: 1px + 5;
// font-size: 6px;
Copy the code
function
Less provides many functions for converting colors, manipulating strings, and performing arithmetic operations. Function in detail reference website (www.css88.com/doc/less/fu.) . In the example below we use Percentage to convert 0.5 to 50%, then increase the saturation of the base color value by 5%, and finally increase the brightness of the background color by 25% and increase the hue value by 8.
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base.5%);
background-color: spin(lighten(@base.25%), 8);
}
Copy the code
The namespace
Sometimes, for organizational purposes, or to provide some encapsulation, you’ll want to group your mixins together. Doing this in Less is straightforward, assuming you want to bundle some mixins and variables under #bundle for later reuse or distribution. Now if we want to mix the.button class in #header a, we can use the following code writing method.
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab{... }.citation{... }}Copy the code
#header a {
color: orange;
#bundle > .button;
}
Copy the code
It is used to group mixins under common names. Using namespaces avoids name conflicts and encapsulates mixin groups externally.