Categories: Less 教程

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 b>

它有能力做更少的后处理。

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函数用于解释选项。


冒牌SEO

前端开发者,欢迎大家一起沟通和交流。

Share
Published by
冒牌SEO

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

5 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

3 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago