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); }

是否有办法让它自动输出中文字体？现在我必须手动完成所有操作，对于网址也一样，我可以写一个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并将网址和字体更改为中文版。

Answer 1

如果您能够使用指南针，那么url helpers实际上非常容易。

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

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

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

1）使用罗盘font-url helper来引用字体，类似于使用image-url助手的方式。这里的挑战是你可能需要将字体命名为相同的东西，因为它被引用为src: font-url('font.woff');。这可能不是你想要的

2）对中文字体使用不同的SASS文件。对于SASS的部分内容，这不应该是太多的问题。

你基本上可以拥有所有样式，通过english_styles.scss调用它们，并引用_english-fonts，你已经指定了你想要的字体。你会对中文字体做同样的事情。

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

编辑身体类方法

我认为你想要使用“父选择器”（不确定它是否被称为......）所以你的mixin for images可能是这样的：

@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

SASS / SCSS mixins具有多个输出

1 个答案: