The way of front-end CSS programming-less

Because the front-end CSS writing cumbersome, recently began to learn less, write files with less. The less file can be compiled directly into the. css file we want.

Learning less I am the following is my practice, I hope that small partners can also do their own writing, rather than copy paste mode learning. It's not the same as knocking.

1. Download the domestic koala preprocessor, can automatically compile less into CSS

2. Use sublime to install plug-ins, recommended this way, as we are the front siege lion

Variable

Declare a variable with @

Output

Variables can also be introduced into the variable. You can see the special use of @ref.

If the same variable is defined, the last defined in the current scope will be used. This is similar to the CSS mechanism

Output

Variables are not necessarily declared, they are loaded on demand.

Output

Mixing (mixins)

In less we can define some common set of properties as one class and then call them in another class

Output

Any CSS Class,id property set can be introduced in the same way.

Mixed with parameters

Output

This I particularly like, because he can do a few browser compatibility. haha ~ ~ But when you use the sublime text

Time, there is a plugin that can directly help you generate these prefixes. It's a very powerful thing. Sublime-autoprefixer you can get to know

Parameter blending can be with default values

Output

If you want to hide the Universal collection, then you can declare a mix without parameters

Output

Multi-parameter blending

It's a little more complicated, but let's not use him too complicated.

Output

I hope you understand that the first mix is called, the second one is called, and the third one is not called.

1. Because only one parameter is bound to invoke the first blend that you declared. Mixin,

2. When you have a default value for the second parameter, a parameter is used, and the second parameter is the default, so it is also called

3. The mixture of the third declaration declared is not called because the second parameter does not have a default value.

In the look below effect, call the mix using two parameters

Output

You see that?

1. The mixture of the first declaration is not called

2. The second declaration was called

3. A third statement was also called

* Here is a description, multiple parameters can be separated by commas or semicolons, preferably separated by semicolons

@arguments variables

For a mix of multiple parameters, we can use the @arguments variable

Output

You can also get to know the use of @rest variables, here is not explained here

！ Important Keyword Usage

Output

Use of the Guards mode

Output

You can see that @_ can represent any parameter that can be put into a. Border collection of properties that are common, and another way to implement

is to put the color parameters into the. Border (thick, @color: #fff) This is also possible, I hope you think more.

Expressions for Gurads

It's kind of like programming if/else.

Output

The guards also supports operations where operator operations are below or.

Output

It can also be the case of the following

You can also call the function to judge, you see the following do not have to explain it

Functions and units of several types of checks

You can get to know when the and and take the non-

I hope we can master it well.

Nesting rules

Output

Another type of concatenation

Output

Note & the use of symbols-if you want to write a series selector instead of writing a descendant selector, you can use it & . This is especially useful for pseudo-classes such as :hover and :focus

There is also the advanced usage of &

Output

Operation

I hope you know how to use it, this is very simple, but now the strict mode, I hope all add parentheses

Name space

Other classes can be introduced directly by namespace

Output

Media query Query

Output

The way of front-end CSS programming-less