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

Question

一段时间以来，我在处理一个大型网站时遇到了问题。 主要问题是我们的网站提供两种语言：英文和中文。 中文网站也来自不同的域：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); }

和

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

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

Answer 1

如果您能够使用指南针，使用他们的url helpers 这实际上非常简单。

我认为您需要做的是在config.rb 中设置两个配置组，一个用于英文版，一个用于中文版。

您可以在配置中设置image url 和generated image url 之类的内容。然后图像不应以@include background(foo.png) 的形式引用，而应以background: image-url('foo.png') 的形式引用。当您运行指南针任务时，对于网站的英文版，您将获得为英文图片指定的网址（我不知道“英文图片”是什么 :)）

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

1) 使用 compass 的 font-url helper 引用字体，类似于使用 image-url 帮助程序的方式。这里的挑战是您可能需要将字体命名为相同的东西，因为它会被引用为src: font-url('font.woff');。这可能不是您要寻找的东西

2) 对中文字体使用不同的 SASS 文件。有了 SASS 的部分，这应该不是太多的问题。

您基本上可以拥有所有样式，通过english_styles.scss 调用它们，并在您指定所需字体的地方引用_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");
}

字体类似：

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

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

编译为：

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

更多关于父选择器的信息在这里：http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand