sublime-autoprefixer

Sublime 文本中自动为 CSS 或 SCSS 添加前缀的插件

您不必担心供应商前缀。现在您不必再关注了！

手动添加前缀是一项繁琐的工作。也很难追踪需要在哪些地方添加哪些前缀。本插件使用 Autoprefixer 模块根据 Can I Use 数据库给属性和值添加前缀。这意味着它只会添加必要的前缀，而不会使样式表臃肿。它甚至允许您指定要针对哪些浏览器。此外，它还会移除不再需要的前缀。

支持 CSS 和 SCSS，但不支持其他预处理器。

安装

使用 Package Control 安装 Autoprefixer 并重新启动 Sublime。

您需要安装 Node.js 20+。
确保它已在您的 $PATH 中，通过在命令行运行 node --version 来实现。
在 macOS 上，您需要确保它位于 /usr/local/bin 中或将其创建到那里。

有关使用的 Autoprefixer 版本，请参阅 这里。

开始使用

在 CSS 文件中，打开命令面板 (Command Shift P) 并选择 自动前缀 CSS。您可以在运行命令之前创建一个或多个选择，以便只为这些部分添加前缀。

选项

(设置→包设置→Autoprefixer)

您可以使用规则数组指定需要支持哪些浏览器。

查看 支持的浏览器名称。

默认

{
    "browsers": ["defaults"],
    "prefixOnSave": false
}

示例

{
    "browsers": [
        "last 1 version",
        "> 10%",
        "> 5% in US",
        "ie 8",
        "ie 7"
    ]
}

这将添加每个浏览器最新版本的必要前缀，包括全球市场份额超过10%、美国市场份额超过5%的所有浏览器，以及Internet Explorer 7和8。

键盘快捷键

您也可以通过打开“设置 → 键盘绑定 - 用户”来设置一个键盘快捷键来运行命令，并添加包含autoprefixer命令的快捷键。

示例

[
    {
        "keys": [
            "alt+super+p"
        ],
        "command": "autoprefixer"
    }
]

项目设置

您可以为个人项目覆盖默认和用户设置。只需将一个"Autoprefixer"对象添加到项目.sublime-project文件中的"settings"对象中，包含您的项目特定设置。

示例

{
    "settings": {
        "Autoprefixer": {
            "browsers": [
                "last 1 version"
            ]
        }
    }
}