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?

Mixins??Class in class;

Parameter mixin??Class that can pass parameters, just like a function;

Nesting rules??Classes are nested in Class, thereby reducing repeated code;

Operations??Mathematics is used in CSS;

Color function ?? You can edit colors;

Namespace (namespace) ?? Group styles so they can be called;

Scope??Local modification of style;

JavaScript assignment??Use JavaScript expression assignment in CSS.

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:

Uniform definition of color styles

All used color distances are variables The form is uniformly defined. Directly used colors and pixel values ​​are not allowed to appear in other codes in a file. They must use defined variables
. Some CSS rule combinations are defined as mixins and are used inside other elements
to increase readability. Reusability reduces maintenance difficulty

HTML/CSS semantic/style separation

Thanks to the use of the cascading structure mixin namespace, the semantics of html can be fully realized without the need to add style information to the html code

Improve development efficiency

Use less to make handwriting css a pleasure. You don’t have to be constrained by layers of complex selector structures. You don’t have to struggle with large sections of repeated code. Various functional programming tips can greatly improve css. The extremely flexible import method also makes code reuse between multi-person development and projects extremely simple

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.