Less usage Tips

The first knowledge of less is deeply attracted by its functional programming CSS, while the function of writing CSS benefits self-evident, reuse, reuse, or reuse. Not much to say the following simple introduction to the use of less personal experience

First online there are a lot less installation tutorials, this is not much to do introduction, I use is relatively simple less introduction way, only need to be in the head script src a bit good, of course, like pre-compiled general, it is certainly to pay attention to the location of the lower file and Less.js.

Of course, there is a small point to note, because the introduction of the less file is to be handed over to Less.js compiled, this time Chrome eldest brother out of a series of security mechanisms, the card was killed less in the local preview of eligibility.

If you want to browse two methods locally: 1. Use Firefox 2. Configure a node environment, install the anywhere module so that we can preview locally, of course, the same as the local configuration server environment to solve the problem

Don't say much, let's see what kind of avatar it is.

Of course, if the client's less is completely without these problems, itself compiled will be exported a combination of CSS, and later debugging only need to change the project file, export it again good

1. Variable substitution and arithmetic

The introduction of variables, in addition to simplifying the lengthy wording, while adding convenience for reuse, and arithmetic let people have the sense of writing script language

@gray: #DDC;
@normal: 18px;
@center: Translate (-50%,-50%);. Index{color:@gray; font-size: @normal}. Test{background-color:@gray; Width:100px;height:100px;transform: @center;-webkit-transform: @center; font-size: @normal +1px}

2. Hierarchical code

On this side of the code I wrote earlier, the code first level is very strong, followed by this way to avoid. Index_switchpart span{...}, parent-child selector, descendant selector These lengthy wording, not only facilitates debugging, but also saves time

. Index_switchpart{width:100%;position:relative;Height:4.4rem;Background-color: White;span{Position:Absolute;Top:50%; Left:6%;Transform:@tf_left;-webkit-transform:@tf_left;Color:@pink_text; }Div{width:3rem;Height:3rem;background:URL (".. /img/switch.png ") No-repeat Right Center;position:Absolute; Right:6%;Top:50%;Transform:@tf_left;-webkit-transform:@tf_left;background-size:100%;Border:None;Outline:None; }    }

3. Functional programming

If the CSS is a headache for people, it is certainly to mention the compatibility, the major browser overlord competition, the final dilemma is we these small yards, haha. Less is no different to compatible code the gospel of the new century, a little bit js,c basic can get started

. Box (@color, @frist, @second, @third, @fouth){-moz-box-shadow:@color @frist @second @third @fouth;/*Firefox*/-webkit-box-shadow:@color @frist @second @third @fouth;/*Safari and Chrome*/Box-shadow:@color @frist @second @third @fouth;/*Opera 10.5+, and the use of IE-CSS3 IE browser*/}. Index{width:100px;Height:80px;Background-color:Red;. Box (gray,1px,1px,1px,1px);}

4. Mathematical Functions

Less official documentation also provides a series of mathematical functions, since the CSS can be calculated, you can call the class function, here the importance of mathematical functions is self-evident

Here is not introduced, http://less.bootcss.com/functions/have time, you can go to see, can be said to be pretty conscience

Less usage Tips