Use less to develop css_html/css_WEB-ITnose

Recently, I was discussing with my friends how to write CSS code efficiently, so we thought of using CSS preprocessing language. For example (less, sass, etc.). In the end we decided to use less (compared to other css preprocessing languages, it is simpler and the syntax is closer to css).

Let’s first talk about what less is?

Simply put, you can use variables, functions, etc. in your css file to write your css.

What functions does less have?

How to use less in your project?

1. First download less.js.
2. Create your less file, such as index.less.
3. Introduce the above 2 files into your

<strong>rel="stylesheet/less" type="text/css" href="css/index.less"/></strong><strong></strong>

There are two points to note here: First, the rel of the link tag The attribute must be 'stylesheet/less', and secondly, less.js must be introduced after index.less.
Now you can officially experience less.

1. Nesting

Nest and write css like nested html

.wrap{background:@gray;padding:30px;h1{font:18px/2 'microsoft yahei'}}

2. Mix in

There is no need to add multiple classes to html, you only need to do it in css

.box2{.wrap }

3. Parameter mixing

can pass parameters like a js function without repeatedly writing css

1. For example, if you need the rounded corner effect of css3, first define a class, circle The angle value is passed in as a parameter and the default value of 5px is set:
.border(@a:5px){-webkit-border-radius:@a;-moz-border-radius:@a;border-radius: @a;}

2. Use: .box3{.border(20px)}

4. Selector inheritance

I feel that this function is somewhat similar to mixing, not much Use

5. Operation

This is more practical, use numbers or variables to perform operations

@base_margin: 10px;

@double_margin: @base_margin * 2 ;

Use: .box5{.border(10px);border:@base_width / 2 solid #ccc}

6.color function

lighten function: through percentage Lighten colors; less also provides other functions for darkening or adjusting color saturation

lighten(@gray, 10%), which actually only displays 90% of the color of @gray

and other functions are not available I have introduced them one by one. If you want to know less in more detail, you can search for more information online.

There are three main benefits of less:

Copyright statement: This article is an original article by the blogger and has not been authorized Reprinting is not allowed with the permission of the blogger.