When css encounters less

When css encounters less

To some extent, css cannot be called a program. Although it has its own specifications and needs coding like other languages, it's clumsy and disappointing to me. I don't like css because no matter how code is optimized, after a project reaches a certain level, it will look messy. And sometimes it takes a lot of time to locate a bug. Until I find less. Suddenly, jquery in css is probably like it.

Less allows passing parameters and defining variables. You can organize cascading styles in a more elegant manner and write less repetitive code ...... All these advantages allow me not to hesitate to add it to the next project.

For example:

Css should be written like this:

#header h1 {  font-size: 26px;  font-weight: bold;}#header p {  font-size: 12px;}#header p a {  text-decoration: none;}#header p a:hover {  border-width: 1px;}

Less can be written like this:

#header {  h1 {    font-size: 26px;    font-weight: bold;  }  p { font-size: 12px;    a { text-decoration: none;      &:hover { border-width: 1px }    }  }}

Css should be written like this:

#menu a {  color: #111;  border-top: dotted 1px black;  border-bottom: solid 2px black;}.post a {  color: red;  border-top: dotted 1px black;  border-bottom: solid 2px black;}

Less can be written like this:

.bordered {  border-top: dotted 1px black;  border-bottom: solid 2px black;}#menu a {  color: #111;  .bordered;}.post a {  color: red;  .bordered;}

Below are some of its materials:

1. less. js:Http://www.lesscss.net/#download-options

2. Quick Start Tutorial:Http://www.bootcss.com/p/lesscss/

3,To use less in ie6/7/8, you must addEs5-shim.js,: Https://github.com/yumucode/es5-shim

In ie6, http: // localhost/test/less/may cause an error. Http: // localhost/test/less/index. php does not report an error. The ideal practice is not to allow the browser to run less.js, but to convert the .lessfile into a .css file before the page output.