Less · 程序員開發筆記

[TOC] #### 1.先安裝node.js ,下載地址： http://nodejs.cn/ #### 2. 安裝less npm install -g less #### 3.自動編譯：less 生成.css koala 軟件下載地址：http://koala-app.com/index-zh.html #### 4.安裝好后，將對應的項目文件放入到軟件中，在.less文件中編輯css代碼時候，會自動生成.css文件。 #### lesss 參考使用教程 lesss 參考使用教程：http://www.bootcss.com/p/lesscss/ #### 變量變量允許我們單獨定義一系列通用的樣式，然后在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了。 // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* 生成的 CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } #### 混合混合可以將一個定義好的class A輕松的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。 // LESS .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } /* 生成的 CSS */ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } #### 嵌套規則我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度減少了代碼量，并且代碼看起來更加的清晰。 // LESS #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } /* 生成的 CSS */ #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; } #### 函數 & 運算運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的復雜關系。LESS中的函數一一映射了JavaScript代碼，如果你愿意的話可以操作屬性值。 // LESS @the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 10%); } /* 生成的 CSS */ #header { color: #333; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; } #### 在客戶端使用引入你的 .less 樣式文件的時候要設置 rel 屬性值為 “stylesheet/less”: <link rel="stylesheet/less" type="text/css" href="styles.less"> 然后下載 less.js, 在\<head\> 中引入: <script src="less.js" type="text/javascript"></script> 注意你的less樣式文件一定要在引入less.js前先引入。備注：請在服務器環境下使用！本地直接打開可能會報錯！ #### 監視模式監視模式是客戶端的一個功能，這個功能允許你當你改變樣式的時候，客戶端將自動刷新。要使用它，只要在URL后面加上'#!watch'，然后刷新頁面就可以了。另外，你也可以通過在終端運行less.watch()來啟動監視模式。 #### 在服務器端使用安裝在服務器端安裝 LESS 的最簡單方式就是通過 npm(node 的包管理器), 像這樣: $ npm install less 如果你想下載最新穩定版本的 LESS，可以嘗試像下面這樣操作: $ npm install less@latest 使用只要安裝了 LESS，就可以在Node中像這樣調用編譯器: var less = require('less'); less.render('.class { width: 1 + 1 }', function (e, css) { console.log(css); }); 上面會輸出 .class { width: 2; } 你也可以手動調用解析器和編譯器: var parser = new(less.Parser); parser.parse('.class { width: 1 + 1 }', function (err, tree) { if (err) { return console.error(err) } console.log(tree.toCSS()); }); 配置你可以向解析器傳遞參數: var parser = new(less.Parser)({ paths: ['.', './lib'], // Specify search paths for @import directives filename: 'style.less' // Specify a filename, for better error messages }); parser.parse('.class { width: 1 + 1 }', function (e, tree) { tree.toCSS({ compress: true }); // Minify CSS output }); 在命令行下使用你可以在終端調用 LESS 解析器: $ lessc styles.less 上面的命令會將編譯后的 CSS 傳遞給 stdout, 你可以將它保存到一個文件中: $ lessc styles.less > styles.css 如何你想將編譯后的 CSS 壓縮掉，那么加一個 -x 參數就可以了.