1

一段时间以来，我一直在处理我正在开发的大型网站时遇到问题。主要问题是我们的网站提供两种语言：英文和中文。中文网站也来自不同的域：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 并将 url 和字体更改为中文版本。

4

1 回答 1

2

如果您能够使用 compass，那么使用他们的url helpers实际上很容易。

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

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

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

1) 使用 compass 的font-url 助手来引用字体，类似于使用 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

于 2013-07-09T04:53:51.090 回答