1. Introduction

CSS preprocessing is a browser-compatible page style file that takes CSS as the target file and uses variables, functions and their simple logic to achieve more concise, more adaptable, better readability and easier code maintenance

1.1 Why CSS preprocessing

Since the birth of CSS, the basic syntax and core mechanics have not changed substantially, and its development is almost entirely expressive level of improvement. At the beginning of the ROLE of CSS in the web page is only auxiliary decoration, light and easy to learn is the biggest demand; However, the complexity of web sites is no longer comparable, and the original CSS has become too difficult for developers.

And CSS preprocessing with a special programming language, add some programming features for CSS, CSS as a target to generate files, and then developers just use this language for coding work. In layman’s terms, CSS preprocessors style Web pages in a specialized programming language, regardless of browser compatibility, and then compile them into normal CSS files for use in projects. For example, you can use variables, simple logic programs, functions and other basic features in programming languages in CSS, which can make your CSS more concise, more adaptable, more readable, and easier to maintain code.

Some common CSS flaws:

1. Syntax is not powerful enough, such as the inability to write in a nested way, resulting in many repetitive selectors to be written in modular development;
2. The absence of variables and a reasonable style reuse mechanism makes it difficult to maintain logically related attribute values that must be repeatedly printed as literals.

1.2 Three preprocessor languages

They are Less, Sass and Stylus

1. Sass: Born in 2007, the earliest and most mature CSS preprocessor, has the support of the Ruby community and compass, the most powerful CSS framework, currently under the influence of LESS, has evolved to fully CSS compatible SCSS.
2. Less: Introduced in 2009, it is greatly influenced by SASS, but it uses CSS syntax, making it easier for most developers and designers to use. It has far more supporters outside the Ruby community than SASS. Its disadvantage is that compared with SASS, it has Less programmable functions, but its advantage is that it is simple and compatible with CSS
3. Stylus: created in 2010, Stylus is a Stylus from the Node.js community that provides CSS preprocessing support for Node projects. Stylus has a strong following within the community and is not nearly as popular as SASS or LESS in a broad sense.

1.3 Functions of Less

Less is a CSS pre-processing language, it expands the CSS language, increase such as variables, mixing, functions and other functions, so that CSS is easier to maintain, easy to make themes, expansion. Less can run on Node or in a browser.Copy the code

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. Less does not trim the original features of CSS, not to replace CSS, but on the basis of the existing CSS syntax, add procedural language features to CSS.

1.4 Introduction of Less

Less can run on either Node server or browser client.

Generally speaking, there are two cases when a client runs Less:

1. The first method is to reference the.less file directly in the HTML page, and then compile the less file with the help of less.js to dynamically generate CSS styles that exist in the previous page. This method is suitable for development mode.

 <link rel="stylesheet/less" href="style.less">
 <script src="less.min.js"></script>
Copy the code

2. The second way is that we first write the grammar of the.less file, and then use the tool to generate the corresponding CSS file, and then the client can directly reference the CSS file. For example, bootstrap. CSS is compiled using tools, which are more suitable for the runtime environment.

Here’s how to use it in vscode:

1. Install the Ease LESS plug-in
2. Add the following configuration in setting.json

  "[less]": {"editor.suggest.insertMode":"replace"
	},
	"less.compile": {
        "compress": false.// Whether to remove excess whitespace characters
        "sourceMap": false.// Whether to create a file directory tree. If true, a.css.map file will be automatically generated
        "out": true.// Whether to compile the output file
        "outExt": ".css".// The suffix of the output file. The default is.css
    }
Copy the code

3. Check whether the. Less file is created and the CSS file is automatically compiled after related codes are written

2. The body

Syntax and other features of Less

2.1 variable

Less allows us to define commonly used values somewhere and then apply them to styles. Later when we change the value of the defined variable parameter, we can achieve the effect of changing the global

It is worth noting that variables in Less are actually constants, so they can only be defined once.

So what can we define as a variable in CSS?

Almost anything can be reused, such as values, selectors, property names, URLS, etc. (you can also define variables using variables)

See examples for details:

@color:rgb(255.189.91);/ / value
@box_showdow:0px -2px 2px 2px # 999;
@boxname:box;/ / selector
.@{boxname}{
    color: @color;
    width: 200px;
    height: 50px;
    box-shadow: @box_showdow;
    margin-bottom: 20px;
}
p{
  color: @color;
  width: 200px;
  height: 100px;
  border: 1px solid # 000;
}
@cl:# 000;
@hightlight:'cl';// Use variables to define variables
#header{
    color: @@hightlight;
}
Copy the code

Corresponding CSS:

.box {
  color: #ffbd5b;
  width: 200px;
  height: 50px;
  box-shadow: 0px -2px 2px 2px # 999;
  margin-bottom: 20px;
}
p {
  color: #ffbd5b;
  width: 200px;
  height: 100px;
  border: 1px solid # 000;
}
#header {
  color: # 000;
}

Copy the code

2.2 Mixed Usage

The first thing we need to understand is that this is similar to how functions are used

1. Use without reference:

Just refer to the class name

.style{
    color: aqua;
    font-family: 'Courier New', Courier, monospace;
}
.box1{
    .style;
}
Copy the code

Generate CSS:

.style {
  color: aqua;
  font-family: 'Courier New', Courier, monospace;
}
.box1 {
  color: aqua;
  font-family: 'Courier New', Courier, monospace;
}

Copy the code

1. Use with reference:

A default value can be given or not given with parameters, and multiple parameters can be taken.

.bg(@fontsize:3px) {background: # 000;
    font-weight: 100;
    font-size: @fontsize;
}
.box{
    .bg(5px)}Copy the code

Corresponding CSS:

.box {
  background: # 000;
  font-weight: 100;
  font-size: 5px;
}
Copy the code

2.3 nested

We need to know that the ampersand is the name of the selector at the next level, and is often used when representing pseudo-classes or pseudo-elements, etc

Example:

div{
    width: 100px;
    height: 100px;
    ul{
        width: 100%;
        li{
            list-style-type: none;
            text-align: center;
            &:hover{
                color: red; }}}p{
        font-size: 24px;
        color: aqua; }}Copy the code

Generate the corresponding CSS:

div {
  width: 100px;
  height: 100px;
}
div ul {
  width: 100%;
}
div ul li {
  list-style-type: none;
  text-align: center;
}
div ul li:hover {
  color: red;
}
div p {
  font-size: 24px;
  color: aqua;
}

Copy the code

2.4 operation

The variable has to be evaluated with a unit, and then evaluated directly

Example:

@num:20px;
div{
    margin: @num+10 @num - 10 @num*10 (@num/10);
}
Copy the code

Generated CSS:

div {
  margin: 30px 10px 200px 2px;
}
Copy the code

2.5 scope

Scopes use the proximity principle at compile time. Variables or mixed modules are first searched from the current scope. If none is found, the parent scope is searched until it is found.

Example:

@color:red;
div{
    color: @color;
}
p{
@color:yellow;
color: @color;
}
Copy the code

The generated CSS

div {
  color: red;
}
p {
  color: yellow;
}
Copy the code

2.6 the function

2.6.1 Color function

Less provides a series of color manipulation functions. The colors are first converted to HSL color Spaces and then manipulated at the channel level. Commonly used are the following:

2.6.2 Math

LESS provides a convenient set of mathematical functions that you can use to handle some numeric types of values. Commonly used are the following:

2.7 Avoiding Compilation

Sometimes we need to output some incorrect CSS syntax or use some special syntax that Less does not know. To output such values, we can enclose the values that we want to avoid compiling with “” and then prefix the string with a” ~ “.

#main{
    width:~'calc(300px-30px)';
} 
Copy the code

Generation:

#main {
  width: calc(300px-30px);
}
Copy the code