Do not blindly use less css in projects

If you do not know what less css is, you can take a look at this article, is a friend of mine to the newcomers to see the CSS--LESS

It is undeniable that less css is a powerful tool that makes up for some "inherent defects" such as css having no variables and computing failures, but it seems to give me the illusion thatImplement functions for the sake of functionality.

For example, its reference function

.rounded_corners{-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;}#header{.rounded_corners;}#footer{.rounded_corners;}

The following code will be generated after the final compilation

.rounded_corners{-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;}#header{-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;}#footer{-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;}

It seems to make up for a defect in css, but I didn't find out what he is doing. I can simply

.rounded_corners{-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;}

Then, add class = "rounded_corners" to the rounded corner of the page. Of course, you can set parameters for its reference. For example

.margin10(@size:10px){margin:@size;}.test{.margin10;}

It seems very advanced. The parameter can be controlled to reduce the writing of repetitive code. But is it practical? I compared the style in the previous project and found that there was almost no specific style set through parameters. This function is still relatively good for only a few css3 attributes, for example, this shadow Style

.box-shadow(@arguments){-webkit-box-shadow:@arguments;-moz-box-shadow:@arguments;box-shadow:@arguments;}

As long as it is a shadow, there will be no more than these three sentences, such as rounded corners and transparency, which will not be listed one by one.

Then, let's talk about the most basic variables. I never figured out what the css variable is.

@w100:100px;@h100:100px;div{width:@w100;height:@h100;}

It may be said that I have defined a variable that can be called directly in different places. If you want to modify it, you only need to modify it once. But the problem is that, in case I only want to change one of the styles, the other is not dynamic, or both must be modified at the same time.

For example, I have two advertisement areas on one page. The original width and height are the same. Now I want one area to become larger and the other to become smaller, in this way, I feel that defining variables increases my workload.

It may be said that less css does not support four arithmetic operations. Yes, we can.

@w100:100px;@h100:100px;div{width:@w100 + 50px;height:@h100 - 50px;}

Even a bit more young

@w100:100px;@h100:100px;div{width:(@w100 + 50px) / 2 + 75px;height:@h100 - (100px / 2);}

The computing functions in less css are just like variables that I cannot understand. Don't forget that LESS CSS is compiled into your. less file, and the standard css code is finally generated. In other words, how do you define variables and how do you calculate them? In the end, it generates a fixed value, which only reduces the time required to calculate the value, however, I think it is better for me to write an operation.

Of course, less css is not useless, and its nested function makes me shine

<div class="test"><div class="test1"><div></div></div></div>

We usually want to write styles for the above three Divs. There are only two methods, one is to define class/id, and the other is to define a class/id for the outermost layer, then write with inheritance. The less css gives us a friendly way to read.

. Test {. margin10; @ color: # 4d926f; width: @ w100 + 100px; height: 100px; border: 1px solid red; background: @ color; &: hover ,&. selected {background-color: # FFF}/* nested */. test1 {width: @ w100-50px; height: 100px; background-color: red; font-size: 20px;/* multiple nesting */div {width: 100%; height: 50px; background-color: #9F0 ;}}. test1: hover {background-color: @ color }}

I believe that such a style will be easier to search for. It is a great feature for me.

In general, less css is not very suitable for projects,It is more suitable for websites with fixed frameworks such as skins and templates, such as forums and spaces.. Therefore, if you are using less css, please first consider whether this tool is applicable. Do not use it blindly. This not only improves the efficiency, but also increases unnecessary workload.