如何让 sass 编译开发和生产版本的 css？

Question

我正在寻找一种方法来将我的 sass 编译成 2 个不同的输出以用于开发和生产。我已经能够通过采用以下工作正常的方法来实现这一点https://coderwall.com/p/gqqfgw/sass-compass-compile-two-different-files-for-development-and-production-environment-take-2

我遇到的问题是我需要输出的内容不同。对于 CMS，我使用 css 中引用的任何文件（图像、字体等）都需要转换为标签（CMS 独有），而对于我的开发版本，我需要图像的本地路径。

我已经能够通过使用 sass 文件中的变量来在它们之间切换，如下所示：

@if $output == dev {
        background: #FFFFFF url('../images/this-is-my-local-image.jpg') 0 0 repeat-x;
    } @else {
        background: #FFFFFF url('<IMG type="media" id="216155" formatter="path/*"/>') 0 0 repeat-x;
    }

但是我需要一种方法来输出文件的两种变体，而不必每次都进入并更改 $output 变量。

我已经阅读了一些关于在 config.rb 文件中使用变量的信息，但不知道应该如何实现我需要的。

任何建议或正确直接的观点将不胜感激。

谢谢。

Answer 1

为什么不制作 2 个将被编译的专用输出文件。

dev.scss

$output = 'dev'
@include your files

prod.scss

$output = 'prod'
@include your files

所以你只需要切换出生成的文件。

Answer 2

一种方法是为开发和生产创建一个单独的 sass 文件。在新文件中，您可以将$output 的值分别设置为dev 和prod，然后导入在下一行中定义了所有css 的sass 文件。生成的输出 css 将使用相应文件中定义的变量值。