在保存时创建SASS-Autoprefixer-CSS链而不使用Grunt

看了克里斯·科耶的电影后

我想知道-是否有可能在CSS文件构建完成后立即自动运行Autoprefixer升华插件，而不使用Grunt？我需要在Sublime中配置什么以及如何配置

理想的链条是：

---

在SASS save上构建压缩的“style unfixed.css”运行Autoprefixer创建压缩的“style.css”

我不是专家，但我想我刚刚通过一个shell脚本了解了如何做到这一点

先决条件：

• （ST2插件，也适用于ST3）
• SASS编译器（我正在使用）
• （不是ST插件）

完成所有这些之后，我们将创建脚本。出于我们的目的，我们将其命名为

buildcss.sh

：

#!/bin/bash
if [ $# == 0 ]
then 
    echo "Usage: buildcss.sh [scss file] [css file]"
    exit
fi

# Create the css file ($2) from a scss file ($1)
# see "sassc -h" for additional options
sassc $1 $2

# Run autoprefixer, overwrite input .css file
# see "autoprefixer -h" for additional options
autoprefixer -b "> 1%" $2

当然，如果您使用的是Ruby-SASS（

SASS

），而不是

sassc

，那么应该调整脚本

好的，在这一步中，您应该能够运行类似于

/buildcss.sh style.scss style.css的东西来测试并确保该部件正常工作。然后，它只是一个问题，使崇高的文本运行，并通过正确的论点

为此，创建一个自定义生成系统<代码>工具>构建系统>新构建系统…

在ST3中。ST2和ST3之间可能存在一些差异，但在ST3中，我的配置如下所示：

{
    "shell_cmd": "/path/to/script/buildcss.sh $file ${file_path/scss/css/}/${file_base_name}.css",
    "selector": "source.scss",
    "line_regex": "Line ([0-9]+):",
}

正如您可能注意到的，我专门为SCS进行设置，但是如果您需要sass，您可以设置另一个类似的构建系统，在整个过程中用“sass”替换“SCS”。此生成系统还假设您将文件保存在

/scss

子文件夹中，并且css文件应位于同一级别的

/css

子文件夹中

就在这里！每当您保存一个.scss文件时，SublizeOnSaveBuild就会发挥它的神奇作用并启动我们的自定义构建，这将反过来调用调用SASC和AutoRefixer的脚本