When the CSS meets less

In a way, CSS can't be called a program. Although it is like other languages, has its own norms, but also need to code, but its clumsy really let me down. Do not like CSS because no matter how to optimize the code, the project as large as a certain program, will appear a mess. And sometimes it takes a bit of time to locate a bug. Until I found out less. All of a sudden, jquery in CSS is probably it.

Less allows you to pass parameters, allow you to define variables, organize the cascading styles more beautifully, and write a lot of repetitive code. The advantage of all this is that I have no hesitation in going to add it to the next project.

As an example:

CSS to write 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;}

And 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 to write 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;}

And 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;}

Here are some information to learn about it:

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

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

3, under the IE6/7/8 use less, need to add es5-shim.js,: Https://github.com/yumucode/es5-shim

Just under the IE6 test, using http://localhost/test/less/will be wrong, too late to check the reason. and http://localhost/test/less/index.php will not error. It's a good idea not to let the browser run Less.js, but to convert the. less file into a. css file before the page is output.