Less CSS Usage mind mapping

Less is a CSS pre-compiler that can extend the CSS language, add features such as allow variables (variables), Mix (mixins), Functions (functions), and many other techniques to make your CSS more maintainable, thematic, and extensible.

Regarding its specific usage, according to the desert article, the author summarizes as follows:

Enlarge Local After: (Space is limited, so hide all instance code demo)

It is also important to:

The following combination of their own practice process, the specific description:

1: File directory Condition:

This is introduced in the HTML structure when the client is in use:

Note: "Less style files must be placed before less script files."

2: Source code

2.1 HTML:

<!DOCTYPE HTML><HTML>    <Head>        <MetaCharSet= "Utf-8">        <Linkrel= "Stylesheet/less"type= "Text/css"href= "Style.less">        <Scriptsrc= "Js/less.js"type= "Text/javascript"></Script>        <title>less CSS App</title>    </Head>    <Body>        <H1>Qingqing Flye</H1>        <P>Go to the water-poor place, sit and look at the clouds.</P>        <Pclass= "P2">Like Chinese wind, love big front, refuse mediocrity.</P>        <Pclass= "P3">Like Chinese wind, love big front, refuse mediocrity.</P>        <Divclass= "Box1"></Div>        <Divclass= "Box2"></Div>        <DivID= "header">            <H1><ahref="">Qingqing Flye</a></H1>            <P>Less CSS Exercises</P>        </Div>        <DivID= "Header2">            <H1><ahref="">Qingqing Flye</a></H1>            <P>Less CSS Exercises</P>        </Div>        <DivID= "Header3">            <H1><ahref="">Qingqing Flye</a></H1>            <P>Less CSS Exercises</P>        </Div>        <DivID= "Header4">            <H1><ahref="">Qingqing Flye</a></H1>            <P>Less CSS Exercises</P>        </Div>    </Body></HTML>

Style.less file:

Less.js file:

The code in Less.js has more than 2,400 lines.

One, variable:

Variables allow you to define a series of common styles individually and then call them when needed. Make a global style adjustment.

Less Source:

Post-compilation CSS:

#header {    color: #4D926F;}h2 {    color: #4D926F;}

Mixing (mixins)

Blending can easily introduce a well-defined class A into another class B, thus simply implementing Class B inherits all the attributes in Class A. We can also call them with parameters, just as with a function.

Less Source:

.rounded-corners (@radius: 5px) {    -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius;}#header { .rounded-corners;}#footer { .rounded-corners(10px);}

Post-compilation CSS:

#header {    -webkit-border-radius: 5px;    -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}#footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}

Nesting

We can nest another selector in one selector to implement inheritance, which greatly reduces the amount of code and the code looks clearer.

Less Source:

#header {    h1 {        font-size: 26px;        font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}

Post-compilation CSS:

#header h1 {    font-size: 26px;    font-weight: bold;}#header p { font-size: 12px;}#header p a { text-decoration: none;}#header p a:hover { border-width: 1px;}

Functions and operations

Operations provide addition, subtraction, multiplication, and manipulation; we can do the property values and color operations, so that the complex relationship between property values can be realized. function one by one in less maps JavaScript code and can manipulate property values if you want.

Less Source:

@the-border: 1px;@base-color: #111;@red: #842210;#header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2);}#footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%);}

Post-compilation CSS:

#header {    color: #333;    border-left: 1px; border-right: 2px;}#footer { color: #114411; border-color: #7d2717;}

The use of less CSS, there are more advanced features, such as: string interpolation, server-side use configuration, JavaScript expressions, avoid compiling, etc., here you can learn the official website.