SASS 编译扩展和压缩 CSS 并重命名输出

Question

我正在使用命令行sass --watch style.scss --style compressed 输出我的 SCSS 样式表的压缩 CSS 版本。

有没有办法输出一个扩展和一个压缩的 CSS 文件，分别调用它们 style.css 和 style.min.css？

我阅读了documentation，但没有找到任何相关信息。

Answer 1

最好的选择是使用 Gulp 或 Grunt 之类的任务管理器。然后，您可以为 SASS 指定两个单独的任务并运行 grunt compile（使用下面的 Grunt 示例）。一种用于压缩，一种用于扩展。否则，如果您不想弄乱配置，我只会在终端上运行另一个命令。

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']);

Answer 2

您可以运行两个终端窗口，每个窗口中都有一个观察者。在一个你会运行

sass --watch style.scss:style.css --style nested

另一个你会跑

sass --watch style.scss:style.min.css --style compressed

我不知道有一种方法可以在一行中做到这一点。