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

Question

我正在使用 SASS。

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

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

Answer 1

如果（无论出于何种原因？）您需要同时存在两个输出变体，您可以使用像 Grunt 这样的任务运行器并定义两个不同的任务，然后同时运行它们。不过，您需要指定两个单独的输出目录，否则第二个任务会覆盖第一个任务的结果，如下所示：

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 任务（但使用相同的输出目录）：

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

grunt.registerTask('dev': ['sass:expanded']);
grunt.registerTask('build': ['sass:compressed'];

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

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