CSS Preprocessor---less (one)

First, Introduction:

Less is a dynamic style language that allows you to use variables, inheritance, operations, functions in styles

Second, use

(1) Client use

1 //introduce your. Less style file, rel attribute difference go to CSS for stylesheet/less2 <Linkrel= "Stylesheet/less"type= "Text/css"href= "Style.less">3 //introduction of Less.js4 <Scriptsrc= "Less.js"type= "Text/javascript"></Script>

(2) service-side use

1 // using NPM to install less 2 $ npm Install-gless 3// or latest version 4 $ npm Install-g [Email Protec Ted]5// command line compile with LESSC 6 $ lessc index.less > Index.css

(3) Call the less compiler in the node project

1 //automatically called2 varless = require ("Less");3Less.render (". MyClass {width:1 +1; Padding:10} ",function(err, CSS) {4 console.log (CSS)5 })6 7 //Output8 . MyClass {9Width:2;TenPadding:10 One } A  - //Call Manually - varParser = require ("less. Parser "); theParser.parse (". MyClass {width:1+2}",function(err, tree) { -   if(err) { - Console.error (err); -}Else { + Console.log (Tree.tocss ()) -    } +})

(4) using the Koala compiler ()

　　　

CSS Preprocessor---less (one)