Less the compilation of detailed less

Master less, you must first master the less of compiling. Because less is a kind of CSS preprocessing language, it is a kind of dynamic language. Less can be run in a variety of languages and environments, including browser-side, server-side, and so on. Because it's a CSS preprocessing language, it needs to be compiled. Here are a few ways to compile.

browser-side compilation

Less can be used directly at the browser end without compiling. In the browser end of the use of less, you need to introduce a JS file, this JS file can be less file in the browser to compile into a CSS file, and then in the rendering to the page.

How to use

1, download less-1.4.2.min.js file;

Download Address: Http://www.leemagnum.com/js/less-1.4.2.min.js

2, the page introduced a suffix named ". Less" file

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

3, the page introduced the downloaded less-1.4.2.min.js file

<script src= "Less.js" type= "Text/javascript" ></script>

Special attention

A, less files to be referenced before the less script

B, must be used under the HTTP (s) protocol

C,. Less files cannot be used across domains (can be resolved by setting up cors on the server side)

Advanced Settings

Specify parameters by creating a global less object before introducing Less.js

<script type= "Text/javascript" >
    less = {
        env: "Development",//or "production"
        Async:false,       //
        Functions: {},      //user functions, keyed by name
        dumplinenumbers: "Comments",//or "mediaquery", or "all"
        relativeurls:false,//whether the relative path
                            is adjusted//If False, the URL is already a relative entry less file
                            //entry less files
        rootpath: ":/a.com/" Add to the path at the beginning of each URL
    ;
</script>
<script src= "less.js" type= "Text/javascript" ></script>

Monitoring Mode

Monitoring mode is an attribute that is used by the client (browser) and automatically refreshes the page when the style file is updated.

You can open monitoring mode by adding #!watch to the URL and refreshing the page. You can also turn on monitoring mode by running Less.watch () in the console.

Modifying Variables

Use Modifyvars to modify less variables at run time. When this function is called with a new variable value, the less file will be recompiled, but will not be reloaded. A basic example of usage:

Less.modifyvars ({
    ' @buttonFace ': ' Red ', '
    @buttonText ': ' #fff '
});

Debug Less

We bring some extra information in the generated CSS so that some debugging tools can navigate to the number of rows in the less file. You can turn this feature on by dumplinenumbers options or by adding!dumplinenumbers:mediaquery to the URL. You can choose the annotation mode, use fireless, or select "Mediaquery" to debug using the Firebug/chrome Developer tool (which is recognized as the SCSS Media Query debug format).

using Koala to compile locally

Koala is a developed open source preprocessing language graphics compiler tool, has now supported less, Sass, Compass and Coffeescript. Currently support the following systems: Windows,mac, 10.7+,linux:32bit/64bit,ubuntu:32bit/64bit, download can go to Baidu search "koala download" to download. The following is an introduction to compiling less.

How to use

1, the installation is completed after opening Koala, the folder dragged into the interface or the left side of the plus selection folder, at this time the left side of the interface folder path generated.

2, at the same time the less file will be displayed in the middle of the interface, right key file selection output CSS file path.

3, left-click Less file on the right there is a function option bar pop-up, the following will introduce the function.

Automatic Compilation (Just-in-time compilation)

When you turn on automatic compilation, the CSS document is updated automatically when you use the editor to press Ctrl+s to save. If this feature is not turned on, the user will be required to click "Execute compile" to update the CSS document.

compilation Options

　　Line Comments: This feature provides a comment above the corresponding less CSS code in the CSS file. The contents of the comment indicate the beginning of the first line from less and indicate the less file. Small examples are as follows

Less code

@color: #4D926F;

Meng {
    color: @color;
}

Post-compiled CSS code

/* Line 3, a.less/
Meng {
  color: #4d926f;
}

　　DebugInfo: This debugging function is to automatically detect errors at the time of saving, note that Just-in-time compilation is not turned on when it is closed, and that the error will not pop up until you execute it. Therefore, it is recommended to turn on Just-in-time compilation. The debugging feature currently detects only some errors that affect compilation: For example, no {}, no semicolon. These errors are not prompted without using a selector or a style input error. Small examples are as follows

Less code

@color: #4D926F;

Meng {
    color: @color;
}

Post-compiled CSS code

@media-sass-debug-info{filename{font-family:file\:\/\/e\:\/Li Mengrong-Documentation \/less\/less Koala compilation Less\/less\/b\.less} line{font-family:\000033}}
. Meng {
  color: #4d926f;
}

　　Strict Mathematics (strict math) and strict units (strict Units) are Koala 2. 0 of the new two, there is no study of the difference between the compilation is not annotated. Small examples are as follows

Less code

@width: 2.233323232em;

. Meng {
width: @width;
}

Post-compiled CSS code

. Meng {
  width:2.233323232em
}

output mode (code compression)

　　normal: As the name suggests, is not compressed.

Less code

@width: 2.233323232em;

. Meng {
   width: @width;
   Leng {
	width: @width;
   }
}

Post-compiled CSS code

. Meng {
  width:2.233323232em
}
. Meng. Leng {
  width:2.233323232em;
}

　　compression (compress): As the name suggests, is compression.

Less code

@width: 2.233323232em;

. Meng {
   width: @width;
   Leng {
	width: @width;
   }
}

Post-compiled CSS code

. Meng{width:2.233323232em}.meng. Leng{width:2.233323232em}

　　Yui Compression (yuicompress): The use of Yui compression packaging tools to compress.

Less code

@width: 2.233323232em;

. Meng {
   width: @width;
   Leng {
	width: @width;
   }
}

Post-compiled CSS code

. Meng{width:2.233323232em}.meng. Leng{width:2.233323232em}

Less detailed compilation less for everyone to introduce here. Understand the less is how to compile, in order to better understand the less grammar knowledge. With less compiling magic weapon, for us to understand less made a solid preparation.