Browser sideLess_html/css_WEB-ITnose

Summary:

I have used Less in previous projects, and I will also use it in the project I am currently responsible for, so I will summarize Less for future reference. This article mainly talks about how to use Less on the browser side.

Introduction:

LESS is a dynamic cascading style sheet language designed by Alexis Sellier. LESS is open source, and its first version was written in Ruby, but in subsequent versions, Ruby was gradually replaced by JavaScript. Thanks to JavaScript, LESS can run on the client (IE6, Webkit, Firefox) or on the server (Node.js, Rhino).

Essentially, LESS contains a set of custom grammars and a parser. Users define their own style rules based on these grammars. These rules will eventually be compiled by the parser to generate corresponding CSS files. LESS does not cut out the original features of CSS, nor is it used to replace CSS. Instead, it adds procedural language features to CSS based on the existing CSS syntax. You can also write styles according to css rules in the less file.

Meaning:

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

Introducing LESS:

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

When rendering an HTML page, the less file is required Compile into css file. We can do it in many ways. On the server side, such as Node.js, we have dedicated less compilation modules. If it is on the client, you need to download the less.js file from the LESS official website, and then introduce it into the HTML page, as follows:

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

Using less.js for development in the browser is great, but it is not recommended for use in a production environment. Browser-side usage is the most intuitive way to develop with LESS. If it is in a production environment, especially where performance requirements are relatively high, it is recommended to use node or other third-party tools to compile it into CSS before using it online.

Note:

Make sure to include the .less stylesheet before the less.js script

When you import When there are multiple .less style sheets, they are compiled independently. Therefore, variables, mixins, and namespaces defined in each file will not be shared by other files.

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

Browser options:

You can create a global before introducing less object, for example:

<!-- set options before less.js script -->    <script>      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/"        };    </script>    <script src="less.js"></script>

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

<script src="less.js" data-env="development"></script>

Or, you can also override certain options in the link configuration parameters, as follows :

<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

Note:

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

The object attribute name is not camel case

The configuration of the link tag is only related to the time option, others have no effect

Observation mode:

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

<script>less = { env: 'development'};</script><script src="less.js"></script><script>less.watch();</script>

Note:

If observation is started mode, the browser will continuously request less files and determine whether to re-render the page based on the Last-Modified parameter. This will cause a lot of performance consumption, so do not enable observation mode online. If it is a development environment, this makes it easier for us to observe the effect.

Complete demo:

reset.less is to reset the browser default style, config.js is the configuration parameters of browser options, as follows:

config.js

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

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    <link rel="stylesheet/less" type="text/css" href="./less/reset.less" />    <link rel="stylesheet/less" type="text/css" href="./less/styles.less" />    <script src="./js/config.js"></script>    <script src="./js/less-1.3.3.min.js"></script>    <script>less.watch();</script></head><body></body></html>

Parameter details:

async

Type: Boolean
Default: false
Whether to load important files asynchronously
dumpLineNumbers

Type: String
Options: ''| 'comments'|'mediaquery'|'all'
Default: ''
If set, this adds source code line information to the output CSS file. This helps you debug and analyze where a particular rule is coming from. The
comments option is used to output user-understandable content, and the
mediaquery option is used to use the Firefox plug-in to parse css file information.
env

Type: String
Options: development or production
Default: depends on page URL
Running environment, if it is production, your css file will be cached locally and the information will not be output to the console . If the URL starts with file:// or is local to you 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 error reporting method when compilation fails.
fileAsync

Type: Boolean
Default: false
When accessing the page using the file protocol, whether to introduce the file asynchronously
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. If it is 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 path strength. If set to FALSE, the url is relative to the root directory file.
globalVars

Type: Object
Default: undefined
Global variable list injection code. Variables of type "string" must explicitly contain quotes.
less.globalVars = { myvar: "#ddffee", mystr: ""quoted"" };
This option defines a variable that can be referenced by the file. This variable can also be redefined in the file.
modifyVars

Type: Object
Default: undefined
Same format as globalVars.
The opposite meaning of the globalVars parameter, it will be defined at the end of your file , which means it will override what you defined in the file.
rootpath

Type: String
Default: false
Set the root directory. All Less files will start from this directory.
useFileCache

Type: Boolean
Default: true (previously false in before v2)
Whether to use per-session file cache. Cached files can use modifyVars and it won't retrieve all files again. If you use watch mode or call refreshload with set to true, the cache will be cleared before running.