1, What is CSS preprocessor

CSS preprocessor defines a new language. Its basic idea is to use a special programming language to add some programming features to CSS, take CSS as the target to generate files, and then developers only need to use this language for coding. Generally speaking, CSS preprocessor uses a special programming language to design Web page style, and then compiles into normal CSS files for project use. CSS preprocessor adds some programming features to CSS, without considering browser compatibility. For example, you can use variables, simple logic programs, functions and other basic features in the programming language in CSS, which can make your CSS more concise, more adaptable, more readable, easier to maintain code and many other benefits.

1. notes

/**/Visible in. css; / / invisible in. css

2. Variable: @ variable name: value (skin changing can be realized by using variable)

/*Variable @ variable name: value*/
@baseColor:#e92322;
a {
  color: @baseColor;
}

//Corresponding. css code
/*Variable @ variable name: value*/
a {
  color: #e92322;
}

3. mix in: you can introduce a defined style into another style, similar to function call

/*Blending brings a defined style into another style, similar to a function call*/
.addRadius(@r:10px) {/*Default 10px*/
  border-radius: @r;
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
}
div {
  width: 200px;
  height: 200px;
  .addRadius(5px);
}

//Corresponding. css code
/*Blending brings a defined style into another style, similar to a function call*/
div {
  width: 200px;
  height: 200px;
  /*Default 10px*/
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

4. Nesting: implement the inheritance of selectors, reduce the amount of code, and make the code structure clearer

/*Nesting: implement the inheritance of selectors, reduce the amount of code, and make the code structure clearer*/
.jd_header {
  width: 100px;
  height: 100px;
  .addRadius();
  >div {
    &::before {
      content: "";
    }
    width: 100%;
    a {
      text-decoration: underline;
      &:hover {
        text-decoration:none;
      }
    }
    >h3 {
      width: 100%;
      height: 100%;
    }
    ul {
      list-style: none;
    }
  }
}

//Corresponding. css code
/*Nesting: implement the inheritance of selectors, reduce the amount of code, and make the code structure clearer*/
.jd_header {
  width: 100px;
  height: 100px;
  /*Default 10px*/
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
.jd_header > div {
  width: 100%;
}
.jd_header > div::before {
  content: "";
}
.jd_header > div a {
  text-decoration: underline;
}
.jd_header > div a:hover {
  text-decoration: none;
}
.jd_header > div > h3 {
  width: 100%;
  height: 100%;
}
.jd_header > div ul {
  list-style: none;
}

I think less is easy to use. His writing method follows the structure of the web page. Practice a few small examples to know how to write.