Browser-side Less

Browser-side Less
Abstract:

If Less is used in the previous project and is used in the current project, we will summarize Less for later viewing. This article focuses on 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 is written in Ruby. However, in subsequent versions, Ruby is gradually replaced with JavaScript. Benefiting from JavaScript, LESS can be run on the client (IE6 +, Webkit, Firefox), or on the server (Node. js, Rhino ).

Essentially, LESS includes a set of custom syntaxes and a parser. You can define your own style rules based on these syntaxes. These rules will eventually generate the corresponding CSS file through the parser. LESS does not crop the original features of CSS. Instead, it is not used to replace CSS. Instead, it adds the features of a procedural language to CSS based on the existing CSS syntax. You can also write styles in less files according to css rules.

Meaning:

The traditional style Writing Method is changed, and the development efficiency is improved by Object-Oriented writing.

Introduce LESS:

First, introducerelThe attribute value isstylesheet/lessOf.lessStyle sheet. As follows:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

When rendering an HTML page, the less file must be compiled into a css file. We can have many methods. On the server side, such as Node. js, we have a dedicated less compilation module. If you are on the client, you need to download the LESS. js file from the less official website, and then introduce it on the HTML page, as shown below:

<script src="less.js" type="text/javascript"></script>

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

Using less. js in a browser is good, but it is not recommended for production environments. Browser is the most intuitive way to use LESS development. If it is in a production environment, especially for scenarios with high performance requirements, we recommend that you use node or other third-party tools to compile them into CSS and then use them online.

Note:

• Ensure acceptance.lessStyle Sheet inBefore the less. js script
  
• When you introduce multiple.lessStyle Sheets are compiled independently. Therefore, the variables, blends, and namespaces defined in each file are not shared by other files.
• The page must be accessed through the server environment; otherwise, an error is returned.

Browser options:

You can introduceBefore <script src = "less. js"> </script>Create a globallessTo specify parameters, 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>

 

However, this affects all initial link tags. You can also add options in the specified script tag, as shown below:

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

 

Alternatively, you can overwrite some options in the link configuration parameters, as shown below:

<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 property name is not camped.
• The link tag configuration is only related to the time option.

Observation mode:

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

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

Note:

If the observation mode is enabled, the browser will continuously request the less file and judge whether to re-render the Page Based on the Last-Modified parameter, which will cause high performance consumption, therefore, do not enable the observation mode online. If it is a development environment, this makes it easier for us to observe the effect. You can also add'#!watch'To trigger the observation mode.

Complete demo:

Reset. less is to reset the default style of the browser, and config. js is the configuration parameter of the browser options, as shown below:

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>
 
 
Parameters:
Async
Type: Boolean
Default: false
Whether to asynchronously load important files
DumpLineNumbers
Type: String
Options: ''| 'comments' | 'mediaquery' | 'all'
Default :''
If this parameter is set, the CSS file output from the source code line is added. This helps you debug and analyze where a specific rule 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
In the 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 or has no standard port, this will be considered as the development mode.
For example:
Less = {env: 'production '};
ErrorReporting
Type: String
Options: html | console | function
Default: html
Set the error report method when compilation fails.
FileAsync
Type: Boolean
Default: false
Whether to asynchronously introduce files when pages are accessed using the file Protocol
Functions
Type: object
User-Defined Functions
E.g.
Less = {
Functions :{
Myfunc: function (){
Return new (less. tree. Dimension) (1 );
}
}
};
It can be used like a Less function.
. My-class {
Border-width: unit (myfunc (), px );
}
LogLevel
Type: Number
Default: 2
Number of logs output on the console. In a production environment, no information is output.
2-Information and errors1-Errors0-Nothing
Poll
Type: Integer
Default: 1000
Test Time in observation mode.
RelativeUrls
Type: Boolean
Default: false
Use relative strength. If set to FALSE, the url is relative to the root directory file.
GlobalVars
Type: Object
Default: undefined
Inject code into the global variable list. Variables of the string type must explicitly contain quotation marks.
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.
In contrast to the globalVars parameter, it will be defined at the end of your file, which means it will overwrite what you have defined in the file.
Rootpath
Type: String
Default: false
Set the root directory. All the Less files will start with this directory.
UseFileCache
Type: Boolean
Default: true (previusly false in before v2)
Whether to use cache for each session file. The cached file can use modifyVars, and it does not retrieve all files again. If you use observation mode or call refresh to load and set it to true, the cache will be cleared before running.