Learn the web's mobile Web from scratch (eight) less

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:https://github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:https://blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go into the Web front-end learning adventure!

First, Less introduction

Less is a dynamic stylesheet language that makes it very easy to write CSS by means of a concise syntax definition, in essence, less contains a set of custom grammars and a parser.

Second, less installation

1. Download and install the node. JS Environment. (Official website: https://nodejs.org/zh-cn/)

2. Verify that the node environment is installed successfully after installation is complete.

Enter on the command line: node -v The version number of node that appears indicates that the installation was successful.

3, install less tools (need to network).

On the command line, enter: To npm install -g less download the installation.

4. After installation, verify that less is installed successfully.

Command line input: lessc -v the less version number appears, which means the installation was successful.

Third, compile

The browser only recognizes that css,less is just a tool for improving CSS maintainability, and ultimately needs to compile less into CSS.

There are two ways to compile:

1. One is to compile manually using the command line method.

After we have written the good one less file, you can use the command line to enter the following instruction to compile the more files into a CSS file.

lessc .\test.less .\test.css

This method of manual compilation is inefficient, generally we will use some editors to complete the automatic compilation.

2, here I use Vscode, the use is very simple, only need toinstall the plug-in "easy less", then write the lower file in the save will automatically in the less files in the same directory to generate CSS files.

Iv. Syntax 1, annotations

There are two ways of commenting: // or /**/ .

However, there are differences between the two types of annotations: The two styles are commented in less, but the // comments are not compiled, that is, they are not displayed in the generated CSS file, and the /**/ annotations are displayed in the CSS file.

/*注释  才会编译*///这也是样式，但是不会进行编译

2. Variables

The syntax format is: @变量名：值; , for example@baseColor: #ccc;

When used:div { color: @baseColor;}

/*变量  @变量名:值; */@baseColor:#e92322;a{  color: @baseColor;}

3. Mixing (similar to function)

Grammar:.样式名(@变量名 ：默认值) {具体样式}

/*混入:可以将一个定义好的样式引入到另外一个样式中  类似于函数的调用*//*.addRadius{  border-radius: 10px;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;}*//*相当于定义一个函数的参数*/.addRadius(@r:10px){  border-radius: @r;  -webkit-border-radius: @r;  -moz-border-radius: @r;}div{  width: 200px;  height: 200px;  /*引入已经写好的圆角样式*/  /*传入参数*/  .addRadius(5px);}

4. Nesting

Nesting allows for the inheritance of selectors, which reduces the amount of code while using the code structure to be clearer.

/* 以前我们写的样式.jd_header{}.jd_header > div{}.jd_header > div > h3{}.jd_header > div > h3::before{}.jd_header > div > a{}.jd_header > div > a:hover{}*//*嵌套:实现选择器的继承，可以减少代码量，同时使用代码结构更加清晰*/.jd_header{  width: 100%;  height: 200px;  .addRadius();  // 加 > 表示直接子元素  > div{    // 加 & 表示中间没有空格为 div::before，如果没有 & 则是 div ::before 就错了。    &::before{      content: "";    }    width: 100%;    // div下面的直接子元素a    >a{      text-decoration: underline;      // a::hover，中间没有空格      &:hover{        text-decoration: none;      }    }    > h3{      height: 20px;    }    ul{      list-style: none;    }  }}

V. Introduction of less files

After we have written the less file, we automatically parse it into CSS and add it to the HTML file. If a lot of CSS files, you have to introduce a lot of link tags, then you can directly introduce less file it?

Of course.

Grammar:

<link rel="stylesheet/less" href="./index.less">

Just add less to the stylesheet behind the show.

It is not possible to introduce less files, but also to introduce the JS plug-in that will parse not.

<script src="./js/less.js"></script>

Looks like trouble oh, why do you want to introduce less file, what is the benefit of it?

The advantage is that no matter how many less files you have, you just need to introduce a less file, and the other less files you need are included in the less file you introduced.

How do I introduce other less files in the less file?

Grammar:

@import "other1.less";  // other.less 为其他 less 文件的路径名称@import "other2.less";@import "other3.less";

In this way, no matter how many less files you have, you can write to a little file that you want to introduce.

Learn the web's mobile Web from scratch (eight) less