SASS/SCSS mixins with multiple outputs - sass

Question

For a while now I've been running into a problem with a large site I'm working on.
The main problem is that our site is offered in two languages: English and Chinese.
The Chinese site is also offered from a different domain: domain.com and domain.com.cn
This brings some issues with it in all our CSS work, mainly fonts and another thing is the domains, since images are offered from our CDN we have to put absolute links into our css, but this also means we have to change it for our Chinese site
body.en .title { background: url(http://media.domain.com/title.png); }
body.cn .title { background: url(http://media.domain.com.cn/title.png); }
The same goes for fonts, the fonts we use for our English version don't support Chinese characters so we use a different font for Chinese characters
body.en .title { font-family: "Our English font" }
body.cn .title { font-family: "Our Chinese font" }
I'm now wondering if SASS could help with this, at the moment I just have a different file (_cn.scss) that changes all links and fonts, specifically for the Chinese version.
But let's say I have this mixin to output some css for fonts:
#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); }
Would there be a way to make it automaticly output the Chinese font as well? Right now I have to do this all manually, the same goes for the urls, could I write a mixin that when I use it like
body.en .title { #include background(image.png); }
it outputs both
body.en .title { #include background(http://media.domain.com/image.png); }
and
body.cn .title { #include background(http://media.domain.com.cn/image.png); }
I know this probably isn't possible, but I'm just looking for a better solution, right now I have to go through all the css again and change urls and fonts to the Chinese version.

Answer 1

If you're able to use compass, this is actually pretty easy with their url helpers.
I think what you'd need to do is setup two config groups in config.rb, one for the english version and one for the chinese version.
You can set things like the image url, and generated image url in the config. Images should then be reference not as #include background(foo.png) but as background: image-url('foo.png'). When you run your compass task, for the english version of the site, you'd get the urls you specify for english images (what an "english image" is, I have no idea :))
Fonts are slightly different since you're probably working with completely different files. Two approaches you could take:
1) use compass's font-url helper to reference the fonts, similar to the way you would use the image-url helper. The challenge here is that you would presumably need to name the font the same thing because it'd be referenced as src: font-url('font.woff');. This might not be exactly what your'e looking for
2) Use a different SASS file for Chinese fonts. With SASS's partials, this shouldn't be too much of an issue.
You could basically have all styles as they are, call them through english_styles.scss, and reference _english-fonts where you've specified the fonts you want. You'd do the same for the Chinese fonts.
Then, when you run Compass, you'd get two different stylesheets with all sorts of correct url goodness.
edit for body class approach
I think you'd want to use the "parent selector" (not sure if that's what it's called...) so your mixin for images might be something like this:
#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');
}
compiles to:
.en .class {
background: url("http://media.domain.com/file.png");
}
.cn .class {
background: url("http://media.domain.com.cn/file.png");
}
Fonts would be similar:
#mixin fontOutput($enFont, $cnFont) {
.en & {
font-family: $enFont;
}
.cn & {
font-family: $cnFont;
}
}
.item {
#include fontOutput('comic sans ms', 'china sans ms');
}
compiles to:
.en .item {
font-family: "comic sans ms";
}
.cn .item {
font-family: "china sans ms";
}
More information on parent selectors is available here: http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand