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文件不需要两个版本的相同名称，您当然可以为其中一个使用特定名称{{1} }和*.css：

*.min.css

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

1 个答案: