Css 如何监视SASS以生成压缩、扩展或其他样式的组合？

我在用SASS

但是如何从项目文件夹的根目录监视SASS文件（*.scss），以生成压缩（缩小）和扩展（美化）或其他样式的组合

SASS文档中的参考似乎不（新的）用户友好

如果（出于任何原因？）需要同时存在两个输出变量，可以使用类似于的任务运行程序，定义两个不同的任务，然后同时运行它们。但是，您需要指定两个独立的输出目录，否则第二个任务将覆盖第一个任务的结果，如下所示：

sass: {
    expanded: {
        options: {
             style: 'expanded'
        },
        files: {
             'css-expanded/*.css': 'sass/*.scss'
        }
    }
    compressed: {
        options: {
             style: 'compressed'
        }
        files: {
             'css-compressed/*.css': 'sass/*.scss'
        }
    }
}

grunt.registerTask('compile': ['sass:expanded', 'sass:compressed']);

您可能不希望/不需要同时使用两个版本的css输出，但我猜您希望在开发过程中使用扩展输出进行调试，而在构建项目时使用压缩输出？ 如果是这种情况，您仍然需要指定两个sass任务/目标，但为每个任务/目标定义一个单独的grunt任务（但使用相同的输出目录）：

编辑： 如果您希望两个版本同时位于同一输出目录中，并且两个版本的输出css文件不需要相同的名称，那么您当然可以为其中一个版本使用特定的名称

*.css

和

*.min.css

：

sass: {
    expanded: {
        options: {
             style: 'expanded'
        },
        files: {
             'css-expanded/*.css': 'sass/*.scss'
        }
    }
    compressed: {
        options: {
             style: 'compressed'
        }
        files: {
             'css-compressed/*.min.css': 'sass/*.scss'
        }
    }
}

grunt.registerTask('compile': ['sass:expanded', 'sass:compressed']);

---

只运行一次命令并指定两种不同的样式是无法做到这一点的，但是为什么不在两个单独的终端中运行两个命令呢？@mzgajner，好的，那么您的意思是在SASS命令行命令中没有可以组合多个样式的选项。对吗？谢谢@FranzHeidl。这个解释非常详细和有用。然而，我正在研究一种SASS-watch解决方案，它是一个SASS命令行命令。不过，你的回答很有帮助。但是，您能否确认我们是否可以在sass命令本身中组合2种或更多样式。仅从CLI使用vanilla sass（或Compass）无法同时获得两种不同的编译输出样式。Sass使用一个样式选项（嵌套、压缩、扩展…）并根据指定的样式选项编译一次。为了获得两种不同类型的编译，您需要一个任务运行程序来运行两个不同的编译任务（如上所述），或者，先运行一个编译任务，然后再运行一个缩小/丑陋任务（这应该比运行两个编译任务更快）。@FranxHeidl，是的，这就是我想知道的。

sass: {
    expanded: {
        options: {
             style: 'expanded'
        },
        files: {
             'css-expanded/*.css': 'sass/*.scss'
        }
    }
    compressed: {
        options: {
             style: 'compressed'
        }
        files: {
             'css-compressed/*.min.css': 'sass/*.scss'
        }
    }
}

grunt.registerTask('compile': ['sass:expanded', 'sass:compressed']);