Css前置處理器---Less(一)

標籤：調用   編譯器   toc   code   編譯   render   函數   服務   images   

一、簡介:

　　Less是一種動態樣式語言,可以在樣式中使用變數，繼承，運算，函數

二、使用

　　(1)用戶端使用　

1 //引入您的.less樣式檔案，rel屬性區別去css為stylesheet/less2 <link rel="stylesheet/less" type="text/css" href="style.less">3 //引入less.js4 <script src="less.js" type="text/javascript"></script>

　　(2)服務端使用

1 //使用npm安裝less2 $ npm install -g less3 //或最新版本4 $ npm install -g [email protected]5 //命令列使用lessc編譯6 $ lessc index.less > index.css

　　(3)在node項目中調用less編譯器

 1 //自動調用 2 var less = require("less"); 3 less.render(".myClass {width : 1 +1; padding : 10}", function (err, css) { 4    console.log(css) 5 }) 6  7 //輸出 8 .myClass { 9   width : 2;10   padding : 10      11 }12 13 //手動調用14 var parser = require("less.Parser");15 parser.parse(".myClass {width : 1+2}", function (err, tree) {16   if(err) {17      console.error(err); 18    } else {19      console.log(tree.toCss())20    }21 })

　　(4)使用Koala編譯器()

　　　

Css前置處理器---Less(一)