Sublime Text创建SASS - Autoprefixer语言 - CSS链保存时没有Grunt

Question

看完Chris Coyer的

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

我想知道-是否有可能在CSS文件构建后自动运行Autoprefixer Sublime插件而没有Grunt?我需要在Sublime中配置什么?如何配置?

理想的链是:

在SASS上创建压缩的"style-unprefixe .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运行它并传递正确的参数就行了。

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

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

你就知道了!每当你保存一个。scss文件时，SublimeOnSaveBuild就会发挥它的魔力，启动我们的自定义构建，然后调用调用sassc和autoprefixer的脚本。