具有多个输出的SASS/SCSS混合

一段时间以来，我在一个大型网站上遇到了一个问题。 主要的问题是我们的网站有两种语言：英语和中文。 该中文网站也由另一个域名提供：domain.com和domain.com.cn

这给我们所有的CSS工作带来了一些问题，主要是字体，另一个问题是域，因为图像是从我们的CDN提供的，我们必须将绝对链接放入CSS中，但这也意味着我们必须为我们的中文站点更改它

body.en .title { background: url(http://media.domain.com/title.png); }
body.cn .title { background: url(http://media.domain.com.cn/title.png); }

字体也是一样，我们的英文版使用的字体不支持汉字，所以我们对汉字使用不同的字体

body.en .title { font-family: "Our English font" }
body.cn .title { font-family: "Our Chinese font" }

我现在想知道SASS是否能帮上忙，目前我只是有一个不同的文件（_cn.scss），可以更改所有链接和字体，特别是中文版

但假设我有这个mixin来输出一些字体的css：

@mixin font-english($font-size: 16px, $font-weight: 300, $line-height: 22px) {
    font-family: "English font";
    font-size: $font-size;
    font-weight: $font-weight;
    line-height: $line-height;
}

body.en .title { @include font-english(14px, 700, 18px); }

有没有办法让它自动输出中文字体呢？现在我必须手动完成这一切，URL也是如此，当我像这样使用它时，我可以写一个mixin吗

body.en .title { @include background(image.png); }

它同时输出两个

body.en .title { @include background(http://media.domain.com/image.png); }

及

---

我知道这可能是不可能的，但我只是在寻找一个更好的解决方案，现在我必须再次检查所有的css，并将URL和字体更改为中文版本。

如果你能使用compass，这对他们来说其实很容易

我认为您需要做的是在

config.rb

中设置两个配置组，一个用于英文版，另一个用于中文版

您可以在配置中设置，如和。然后，图像不应作为

@include-background（foo.png）

引用，而应作为

background:image-url（'foo.png'）

引用。当您运行compass任务时，对于网站的英文版，您将获得为英文图像指定的URL（“英文图像”是什么，我不知道：））

字体略有不同，因为您可能使用完全不同的文件。您可以采取两种方法：

1） 使用compass引用字体，类似于使用图像url帮助器的方式。这里的挑战是，您可能需要将字体命名为相同的名称，因为它将被引用为

src:font-url（'font.woff'）。这可能不是你想要的

2） 对中文字体使用不同的SASS文件。对于SASS的partials，这不应该是一个太大的问题

您基本上可以拥有所有样式，通过english_styles.scs调用它们，并在指定所需字体的位置引用
\u english-fonts
。对于中文字体，你也会这样做

然后，当您运行Compass时，您将得到两个不同的样式表，其中包含各种正确的url

编辑身体类方法

我认为您应该使用“父选择器”（不确定是否是它的名称…），因此您的图像混合可能如下所示：

@mixin imageOutput($image) {
    .en & {
        background: url('http://media.domain.com/#{$image}');
    }
    .cn & {
        background: url('http://media.domain.com.cn/#{$image}');
    }
}
.class {
    @include imageOutput('file.png');
}

汇编至：

.en .class {
  background: url("http://media.domain.com/file.png");
}
.cn .class {
  background: url("http://media.domain.com.cn/file.png");
}

.en .item {
  font-family: "comic sans ms";
}
.cn .item {
  font-family: "china sans ms";
}

字体类似：

@mixin fontOutput($enFont, $cnFont) {
    .en & {
        font-family: $enFont;
    }
    .cn & {
        font-family: $cnFont;
    }
}

.item {
    @include fontOutput('comic sans ms', 'china sans ms');
}

汇编至：

.en .class {
  background: url("http://media.domain.com/file.png");
}
.cn .class {
  background: url("http://media.domain.com.cn/file.png");
}

.en .item {
  font-family: "comic sans ms";
}
.cn .item {
  font-family: "china sans ms";
}

有关父选择器的更多信息，请参见此处：
这是一种有趣的方法，但这将导致有两个样式表（可以，但不是首选）。我真的希望将所有内容都保存在一个样式表中，并使其输出相同的css，但具有不同的主体类。非常有趣，但是我遇到了一个问题，由于所有内容的构建方式，我必须有一个带有ID的“主包装器”，当使用
.en&
，这会带来一些问题，请参阅以下内容：显然，这目前不可能，但将在sass 3.3中得到支持，现在安装alpha版本以确保。嗯，这似乎不起作用，但据我所知，它应该在sass 3.3中得到支持。这在sass中已经提供至少两年了：