Shulou(Shulou.com)06/03 Report--

This article focuses on "how to write CSS Less framework", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to write CSS Less framework.

LESS source files are introduced in the same way as standard CSS files:

The code is as follows:

Add the following code to the HTML where we need to import the LESS source file:

The code is as follows:

Import the file:

The code is as follows:

@ import "variables.less"

@ import "variables.css"

/ * you can also change the standard CSS file directly to .less format * /

Variable and scope

The code is as follows:

/ * manage values with variables * /

@ width: 20px; / / global variable

# homeDiv {

# centerDiv {

Width: @ width; / / the value 30px of the recently defined variable width should be taken here

}

@ width: 30px; / / Local variables, variables and mixtures are delayed loading and do not have to be declared before use

}

# leftDiv {

Width: @ width; / / the value 20px of the variable width defined above should be taken here

}

/ * use variables to manage selector names, URLs, attributes * /

@ mySelector: banner; / / defines a variable for the selector name

@ images: ".. / img"; / / variable can be a string

@ property: color; / / defines a variable for the attribute name

. @ {mySelector} {/ / the use of variables for selector names

Background: url ("@ {images} / white-sand.png"); / / URLs usage of variables

@ {property}: # 0ee

…… / / other general attributes

}

/ * compile the generated CSS file * /

.banner {

Background: url (".. / img/white-sand.png")

Color: # 0ee

……

}

Variables can be defined and used in nests

The code is as follows:

Fnord: "I am fnord."

@ var: "fnord"

Content: @ @ var;// nested use

Content: "I am fnord."; / / compiled result

/ * when a variable is defined twice, only the last defined variable is used, and Less searches up from the current scope. , /

Numeric values, colors and variables can be calculated

The code is as follows:

@ init: # 111111

@ transition: @ init*2

@ var: 1px + 5 / / Less can tell the difference between colors and units

.switchColor {

Color: @ transition

}

/ * compile the generated CSS file * /

.switchColor {

Color: # 222222

}

Mixing (Mixins) and function

The code is as follows:

.roundedCorners (@ radius:5px) {/ / define parameters and give default values

-moz-border-radius: @ radius

-webkit-border-radius: @ radius

Border-radius: @ radius

}

/ / used in another style selector

# header {

.roundedCorners; / / use classes and parameters are default values

}

# footer {

.roundedCorners (10px); / / Custom parameter values

}

.bordered {

Border-top: dotted 1px black

Border-bottom: solid 2px black

}

# menu a {

Color: # 111

.bordered

/ * if you use the properties of the above class within another rule set, you can access the class name (or Id name) of the property directly * /

}

@ arguments variable: when Mixins references this parameter, this parameter represents all variables (multiple parameters).

The code is as follows:

.boxShadow (@ xDrex 0rect / mrrlv 0mlt blurlu 1px / mlx / color / 0000) {

-moz-box-shadow: @ arguments

-webkit-box-shadow: @ arguments

Box-shadow: @ arguments

}

# header {

.boxShadow (2pxrec 2pxmeme 3pxref 36)

}

Namespace:

The code is as follows:

# mynamespace {

.home {...}

.user {...}

}

/ / if we want to reuse the user selector, we just need to use it where we need to mix the selector. # mynamespace > .user

Nesting rules:

The code is as follows:

Top

The code is as follows:

/ * LESS files using nested rules * /

# home {

Color: blue

Width: 600px

Height: 500px

Border:outset

# top {

Border:outset

Width: 90%

}

}

/ * compile the generated CSS file * /

# home {

Color: blue

Width: 600px

Height: 500px

Border: outset

}

# home # top {

Border: outset

Width: 90%

}

A {

Color: red

Text-decoration: none

&: hover {

/ * when there is &, it parses the same element or the pseudo class of this element. No & parsing is a descendant element. & represents the parent selector of the current selector * /

Color: black

Text-decoration: underline

}

}

/ * compile the generated CSS file * /

A {

Color: red

Text-decoration: none

}

A:hover {

Color: black

Text-decoration: underline

}

Extend:

Extend is a Less pseudo-class that is an extension selector; the extension selector must be at the end of all pseudo-classes

The code is as follows:

Nav ul:extend (.inline)

Background: blue

}

.inline {

Color: red

}

/ * compile the generated CSS file * /

Nav ul {/ / declaration block remains intact

Background: blue

}

.inline, nav ul {

Color: red

}

Pre:hover,. Some-class {

&: extend (div pre)

}

/ * the above is exactly the same as adding an extend to each selector * /

Pre:hover:extend (div pre)

.some-class:extend (div pre) {}

In essence, extend looks for the compiled CSS, not the original less

The code is as follows:

.bucket {

The nesting in the tr & {/ / target selector, & represents the nearest parent element

Color: blue

}

}

.some-class:extend (tr .bucket) {} / / identify nested rules

/ * compile the generated CSS file * /

Tr .bucket,. Some-class {

Color: blue

}

Extend must be an exact match (including wildcards *, pseudo-class order, nth expressions, with the only exception of quotation marks in the attribute selector, less will know they are the same, and then match it)

The code is as follows:

.a.class

.class.a

.class > .a {

Color: blue

}

.test: extend (.class) {} / / does not match the values of any of the above selectors

* .class {

Color: blue

}

.noStar: extend (.class) {} / / does not match the * .class selector

Link:hover:visited {

Color: blue

}

.selector: extend (link:visited:hover) {} / / will not match. The pseudo-class order is different.

: nth-child (1n+3) {

Color: blue

}

.child: extend (nasty 3) {} / / will not match, although logically 1n+3 and nautical 3 are the same

At this point, I believe you have a deeper understanding of "how to write CSS Less framework", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.