Basic usage of LESS (for writing CSS code quickly)

1. First of all, what is LESS:

LESS definition:

LESS is a CSS preprocessing language, which extends the CSS language, adding variables, mixins, functions and other features. Pros: Makes CSS easier to maintain and extend.

Simply put: it is easier to write CSS code, and it is easier to maintain and expand.

Note : LESS is just a plain text and does not affect the writing of the code

Second, the basic steps of using LESS

1. First create a file with the extension .less
2. Here we need to introduce a software koala (koala)
   http://koala-app.com/index-zh.html
   
   
   • Related concepts of koala software:
     It is a front-end preprocessor language graphical compilation tool that supports Less, Sass, Compass, and CoffeeScript to help web developers use them more efficiently for development. Cross-platform operation, perfectly compatible with windows, linux, mac.
   • Usage of koala software:
     a) . First drag the folder where the less file is written into koala, click refresh to refresh, do not close the koala interface.
     b) . After opening koala, write less code. When saving the less file, the grammar in less will automatically generate the corresponding .css file
     . c). The obtained .css file can be imported into the style through link
3. Notes for koala compilation:
   a) . When saving, a red box will pop up in the lower right corner, indicating that there is an error in compilation, please check your code for errors
   b) . If the folder where the .less file is placed is called less , then when compiling, the css file will be generated in this folder.
   c) . If it is not called less, it will be in the same level directory

3. Basic grammar of LESS

① Variable definition:

Format: (variable name: variable value;)

Among them: @jdRed is the variable name, and rgba(201,21,35,0.8) is the variable value.

@jdRed:rgba(201,21,35,0.8);

After the variable is defined, you can use the variable to replace the fixed value. If you need a value, you can directly modify the value of the variable, which is more conducive to maintaining the code.

/* 设置了body，h3，ul的背景颜色均为一样 */
body {
  background-color: @jdRed;
}
h3 {
  background-color: @jdRed;
}
ul {
  background-color: @jdRed;
}

② Notes:

a). Less supports the same annotations as js, and such annotations will not be compiled.

//@minWidth: 100px;   不会被编译

b). When compiling with css annotation name, the annotation will also be preserved.

/* 
    @minWidth: 100px;
    @imagesSize: 100px 100px;   会被编译
*/

③ Mixing:

Purpose: Add attributes from existing styles

• As can be seen from the code, a class of oneColor is defined

.oneColor(){
  background-color: red;
  border:1px solid red;
  color: red;
}

• Two ids are defined, and the oneColor class is referenced

#item {
    .oneColor;
    font-size: 20px;
}
#menu {
    .oneColor;
    line-height: 50px;
}

• After the compilation is completed, the obtained css code is as follows: (#item and #menu both get the attribute set of the oneColor class)

.oneColor(){
  background-color: red;
  border:1px solid red;
  color: red;
}
#item {
    background-color: red;
    border:1px solid red;
    color: red;
    font-size: 20px;
}
#menu {
    background-color: red;
    border:1px solid red;
    color: red;
    line-height: 50px;
}

• You can also use a little more complex, (plus variables), define a oneColor class with parameters

.oneColor(@color:#0094ff){
      background-color: @color;
      border:1px solid @color;
      color: @color;
}

• The same set of properties that reference oneColor in #item and #menu

/* 带参数的引用 */
#item {
  .oneColor(#fff);
}
/* 不带参数的引用（会采用默认值） */
#menu {
  .oneColor();
}

• According to the less code written above, after compilation, the resulting css file is as follows:
  Note: (the oneColor class will not appear in the css file)

/* 由于带有参数，会修改内部的值，变为yellow */
#item {
      background-color: #ffffff;
      border:1px solid #ffffff;
      color: #ffffff;
}
#menu {
      background-color: #0094ff;
      border:1px solid #0094ff;
      color: #0094ff;
}

- can also be used in compatibility notation

    .border(@color: #aaa) {
        -webkit-border-radius: @color;
        -moz-border-radius: @color;
        border-radius: @color;
    }

④ Nesting (commonly used)
- -a). Pseudo elements, intersection selectors, :hover, etc., need to be next to the style of the element, and use the "&" symbol to replace the element

.main{
     width: 100%;
     height: 40px;
     /* 利用&符号来替代元素名 */
     &:hover{
         height: 90px;
     }
     &::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 10px;
    }
}

After compiling you will get:

.main {
     width: 100%;
     height: 40px;
}
.main:hover {
    height: 90px;
}
.main::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 10px;
}

• b) . If you only want the style in the class, and you don't pass any parameters, you don't need to write parentheses.
• c) . If you write directly down, the generated css is a descendant
  (it can be a child element or a child element of a child element...)

ul{
    width: 100%;
    li {
         width: 100%;
         text-align: center;
         height: 50px;
         line-height: 50px;
         border-bottom: 1px solid gray;
         border-right: 1px solid gray;
         a{
           color: black;
         }
    }
}

After compiling, you will get:

ul{
    width: 100%;
}
ul li{
        width: 100%;
        text-align: center;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid gray;
        border-right: 1px solid gray;
}
ul li a {
    color: black;
}

⑤ The operation
less also provides operations such as addition, subtraction, multiplication, and division (which can be used for color and attribute value operations)

/* 定义一个变量 */
@width: 100px;
.plus {
    /* 运算时，可以不用加上单位，最终将得到宽度加10 */
    width: @width+10;
}

compiles to:

.plus {
    width: 110px;
}