Less 插件
插件可以上傳來擴展網站的功能。插件用于使您的工作更輕松。
命令行
要使用命令行安裝插件,首先需要安裝lessc插件。該插件可以使用less-plugin開頭安裝。下面是安裝clean-css插件的命令行:
npm install less-plugin-clean-css
如果提及了無法識別的選項,那么它會嘗試加載該選項并顯示一條消息,說明沒有輸入文件。例如:
lessc --clean-css="advanced"
直接,您可以使用以下命令使用安裝的插件:
lessc --plugin=path_to_plugin=options
在代碼中使用插件
在Node中,插件是必需的,它作為一個選項插件傳遞給一個數組。
var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
.then(function(output) {
},
function(error) {
});
在瀏覽器中
在less.js腳本之前,插件作者應該在頁面中包含javascript文件。
<script src="plugin.js"></script>
<script>
less = {
plugins: [plugin]
};
</script>
<script src="less.min.js"></script>
較少插件列表
以下是LESS中可用的插件列表。
后處理器/功能插件
S.N. | 插件及描述 |
---|---|
1 | Autoprefixer 它用于在從LESS轉換后向CSS添加前綴。 |
2 | CSScomb 它有助于改進樣式表的維護。 |
3 | clean-css 它縮小LESS的CSS輸出。 |
4 | CSSWring 它壓縮或縮小LESS的CSS輸出。 |
5 | css-flip 它用于從左到右(LTR)或從右到左(RTL)生成CSS。 |
6 | functions 在LESS本身中寫入LESS的函數。 |
7 | glob 使用glob表達式,可以導入多個文件。 |
8 | group-css-media-queries 它有能力做更少的后處理。 |
9 | inline-urls 自動將網址轉換為數據uri。 |
10 | npm-import 它有能力從npm包導入較少。 |
11 | pleeease 它用于后處理Less。 |
12 | rtl LESS從ltr(從左到右)反轉到rtl(從右到左)。 |
框架/庫 Importers
S.N. | Importers 及描述 |
---|---|
1 | Bootstrap Bootstrap LESS代碼在自定義LESS代碼之前導入。 |
2 | Bower Resolve LESS文件是從Bower軟件包導入的。 |
3 | Cardinal CSS for less.js 在定制LESS代碼之前,導入Cardinal的LESS代碼。 |
4 | Flexbox Grid flexboxgrid導入。 |
5 | Flexible Grid System 它進口柔性網格系統。 |
6 | Ionic 它進口離子骨架。 |
7 | Lesshat 它進口Lesshat mixins。 |
8 | Skeleton 它導入少骨骼代碼。 |
函數庫
S.N. | Importers 及描述 |
---|---|
1 | advanced-color-functions 它用于找到更多的對比色。 |
2 | cubehelix 使用伽馬校正值1,立方體角色函數可以返回兩種顏色之間的顏色。 |
3 | lists 列出操作函數庫。 |
插件作者
LESS允許作者結合較少。
{ install: function(less, pluginManager) { }, setOptions: function(argumentString) { }, printUsage: function() { }, minVersion: [2, 0, 0] }
pluginManager提供了一個持有者,可以添加文件管理器,后處理器或訪問者。
setOptions函數傳遞字符串。
printUsage函數用于解釋選項。