less dynamic style language

1.less Introduction

Less is a CSS preprocessor language, which extends the CSS language, increasing the characteristic variable, Mixin, functions, etc., so that CSS easier to maintain and extend.

2.less needs to be compiled in order to be parsed by the browser

The browser itself can only parse css file, for less can not be resolved.
Either of less compile, let him be converted into the corresponding css file at node environment.
Or less after the introduction of corresponding references js file

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script>

3. Installation node environment

Compile less dependent node environment, install node.js
After installation enter in cmd: node -v
This command is used to query node version, the version number to query said installation was successful

4. Install less compiler

Run npm install -g less in the cmd environment

5. Manually compile less file

Open cmd window to compile less in the file directory, enter the following command to compile

lessc test.less test.css

Test.less to this directory under the file compiled test.css

The definition and use of variables 6.less

/*定义变量*/
@gbColor:red;

.box{
    width: 200px;
    height: 100px;
    /*使用变量*/
    background-color: @gbColor;
}

Compilation results

.box {
  width: 200px;
  height: 100px;
  background-color: red;
}

7. references to other css class

.addBorder{
    border:1px solid red;
}
.box{
    width:100px;
    height: 100px;
    /*引用其他css类*/
    .addBorder();
}

8. Functions

/*设置参数，且有默认的值*/
.addBorder(@size:1px){
    border:@size solid red;
}
.box{
    width:100px;
    height: 100px;
    /*引用并传递参数*/
    .addBorder(10px);
}

9. Nested

.box{
    width:100px;
    height: 100px;
    /*只针对子级div有效*/
    > div{
        display: float;
    }
    /*针对后代所有p标签都有效*/
    p{
        text-align:center;
    }
}

10. The pseudo-class

div{
    width:100px;
    height: 100px;
    &:nth-of-type(1){
        background-color: red;
    }
}

11. operation

div{
    width:400px;
    height: 100px;
    >.item{
        /*运算 相当于33.3333%*/
        width:1/3*100%;
    }
}

12. Import

You can import a .less file, all variables in this file can all use. If the file is imported .less extension, the extension can be omitted:

@import "library"; // library.less