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

This article mainly introduces the relevant knowledge of how to use Less on the browser side, the content is detailed and easy to understand, the operation is simple and quick, and has a certain reference value. I believe you will gain something after reading this article on how to use Less on the browser side. Let's take a look at it.

Brief introduction:

LESS is a dynamic cascading stylesheet language designed by Alexis Sellier. LESS is open source, and its first version was written by Ruby, but in subsequent versions, Ruby was gradually replaced with JavaScript. Benefit from the fact that JavaScript,LESS can be run on the client (IE6+, Webkit, Firefox) or on the server (Node.js, Rhino).

In essence, LESS contains a set of custom syntax and a parser, according to which users define their own style rules, which will eventually be compiled through the parser to generate the corresponding CSS file. LESS does not cut out the original features of CSS, let alone replace CSS, but adds programming language features to CSS on the basis of the existing CSS syntax. You can also write styles according to css rules in the less file.

Meaning:

Change the way of writing the traditional style and write it in an object-oriented way to improve the efficiency of development.

Introduce LESS:

First, the value of the introduced rel attribute is stylesheet/less 's .less stylesheet. As follows:

Copy the code

The code is as follows:

When rendering a HTML page, the less file needs to be compiled into a css file. We can do it in many ways. On the server side, such as Node.js, we have a special less compiler module. If you are on the client side, you need to download the less.js file from the LESS official website, and then introduce it in the HTML page, as follows:

Copy the code

The code is as follows:

With the less compilation tool, we can render the page.

Using less.js for development in browsers is good, but it is not recommended for production environments. Browser-side use is one of the most intuitive ways to develop with LESS. If you are in a production environment, especially in situations with high performance requirements, it is recommended to use node or other third-party tools to compile to CSS before launching.

Note:

Be sure to include .less stylesheets before less.js scripts

When you introduce multiple .less stylesheets, they are compiled independently. Therefore, the variables, mixtures, and namespaces defined in each file are not shared by other files.

The page must be accessed through the server environment, otherwise an error will be reported

Browser options:

You can specify parameters by creating a global less object previously, for example:

Copy the code

The code is as follows:

Less = {

Env: "development"

LogLevel: 2

Async: false

FileAsync: false

Poll: 1000

Functions: {}

DumpLineNumbers: "comments"

RelativeUrls: false

GlobalVars: {

Var1:'"string value"'

Var2: 'regular value'

}

Rootpath: ": / a.com/"

}

But this affects all initial link tags. You can also add options in the specified script tab, as follows:

Copy the code

The code is as follows:

Alternatively, you can override some options in the link configuration parameters, as follows:

Copy the code

The code is as follows:

Note:

The priority of the above three configuration parameters is: link tag > script tag > global object.

Object attribute name does not hump

The configuration of the link tag is only related to the time option, and nothing else works.

Observation mode:

If observation mode is used, the env of the configuration parameter is development. Then call less.watch () after the Less.js file is loaded, as follows:

Copy the code

The code is as follows:

Less = {env: 'development'}

Less.watch ()

Note:

If the watch mode is enabled, the browser will constantly request less files to determine whether to re-render the page according to the Last-Modified parameters, which will cause a lot of performance consumption, so do not turn on the view mode online. If it is a development environment, it is convenient for us to observe the effect. You can also add'#! watch' 'after href to trigger the observation mode.

Full demo:

Reset.less is the default style for resetting browsers, and config.js is the configuration parameter for browser options, as follows:

Config.js

Copy the code

The code is as follows:

Less = {

Env: "development", / / or "production"

Async: false, / / load imports async

FileAsync: false, / / load imports async when in a page under

/ / a file protocol

Poll: 1000, / / when in watch mode, time in ms between polls

Functions: {}, / / user functions, keyed by name

DumpLineNumbers: "all", / / "comment" or "mediaQuery" or "all"

RelativeUrls: false,// whether to adjust url's to be relative

/ / if false, url's are already relative to the

/ / entry less file

Rootpath: ": /" / / a path to add on to the start of every url

/ / resource

}

Index.html

Copy the code

The code is as follows:

Less.watch ()

Detailed description of parameters:

Async

Type: Boolean

Default: false

Whether to load important files asynchronously

DumpLineNumbers

Type: String

Options:''| 'comments' |' mediaquery' | 'all'

Default:''

If set, this adds the CSS file for the source line information output. This helps you debug and analyze where one of the specific rules comes from.

The comments option is used to output user-understandable content

The mediaquery option is used to parse css file information using the Firefox plug-in.

Env

Type: String

Options: development or production

Default: depends on page URL

Running environment, if it is production, your css files will be cached locally and the information will not be output to the console. If url starts with file:// or is local or does not have a standard port, this will be considered development mode.

For example:

Less = {env: 'production'}

ErrorReporting

Type: String

Options: html | console | function

Default: html

Sets the method for error reporting when compilation fails.

FileAsync

Type: Boolean

Default: false

Whether to introduce files asynchronously when accessing the page with file protocol

Functions

Type: object

User-defined function

E.g.

Less = {

Functions: {

Myfunc: function () {

Return new (less.tree.Dimension) (1)

}

}

}

You can use it like the Less function.

. my-class {

Border-width: unit (myfunc (), px)

}

LogLevel

Type: Number

Default: 2

The number of logs output in the console. In the case of a production environment, no information will be output.

2-Information and errors1-Errors0-Nothing

Poll

Type: Integer

Default: 1000

In observation mode, the time of the test.

RelativeUrls

Type: Boolean

Default: false

Use relative road strength. If FALSE is set, url is the relative root file.

GlobalVars

Type: Object

Default: undefined

Global variable list injection code. Variables of type "string" must explicitly contain quotation marks.

Less.globalVars = {myvar: "# ddffee", mystr: "/" quoted/ "}

This option defines a variable that can be referenced by a file. This variable can also be redefined in the file.

ModifyVars

Type: Object

Default: undefined

Same format as globalVars.

Contrary to the meaning of the globalVars parameter, it will be defined at the end of your file, which means that it will override what you defined in the file.

Rootpath

Type: String

Default: false

Set the root directory, where all Less files will start.

UseFileCache

Type: Boolean

Default: true (previously false in before v2)

Whether to use each session file cache. Cache files can use modifyVars, and it does not retrieve all files again. If you use observe mode or call refresh load set to true, the cache will be cleared before running.

This is the end of the article on "how to use Less on the browser side". Thank you for reading! I believe you all have a certain understanding of "how to use Less on the browser side". If you want to learn more, you are welcome to follow the industry information channel.

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.