css - Sublime Text 创建 SASS - Autoprefixer - 在没有 Grunt 的情况下保存 CSS 链

Question

看完 Chris Coyer 之后

http://www.youtube.com/watch?v=M7W5unPM_b4&list=UUADyUOnhyEoQqrw_RrsGleA

我想知道 - 是否可以在构建 CSS 文件后立即自动运行 Autoprefixer Sublime 插件并且没有 Grunt？我需要在 Sublime 中配置什么以及如何配置？

理想链是:

在 SASS 保存上构建压缩的“style-unprefixed.css”——运行 Autoprefixer——创建压缩的“style.css”

Answer 1

我不是专家，但我想我只是想出了如何通过 shell 脚本来做到这一点。

先决条件:

• SublimeOnSaveBuild (ST2 插件，也适用于 ST3)
• SASS 编译器(我使用的是 LibSass/SassC )
• Autoprefixer (不是 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 的东西来测试并确保该部分有效。然后只需让 Sublime Text 运行它并传递正确的参数即可。

为此，创建一个自定义构建系统。 ST3 中的 Tools > Build System > New Build System...。此处 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]+):",
}

您可能会注意到，我专门为 scss 设置，但如果您需要 sass，您可以设置另一个类似的构建系统，将“sass”替换为“scss”。此构建系统还假定您将文件保存在 /scss 子文件夹中，并且 css 文件应放在同一级别的 /css 子文件夹中。

就是这样!每当您保存 .scss 文件时，SublimeOnSaveBuild 都会施展魔法并触发我们的自定义构建，这将依次调用调用 sassc 和 autoprefixer 的脚本。