Font Localization with Preprocessors

1-1.font-l10n.less

//
// variables.fonts.less
//

@font-headings: "Some Character-limited Font";
@font-stack:    "Helvetica Neue", Helvetica, Arial, sans-serif;


//
// fonts.less
//

.font-headings { // Default :extend() base.
  font-family: @font-headings, @font-stack;
}

.font(@font-family) {
  & when (@font-family = headings) {
    &:extend(.font-headings all); // Using `all` allows for extending nested selectors.
  }
}


//
// some-component.less
//

.some-component {
  .font(headings);
}


//
// l10n.language.less
//

:lang(ja) {
  .font-headings { // Localized :extend() base.
    font-family: @font-stack; // Don't included the character-limited font on the stack.
  }
}

1-2.font-l10n.scss

//
// variables.fonts.scss
//

$font-headings: "Some Character-limited Font";
$font-stack:    "Helvetica Neue", Helvetica, Arial, sans-serif;


//
// fonts.scss
//

.font-headings { // Default @extend base.
  font-family: $font-headings, $font-stack;
}

@mixin font($font-family) {
  @if $font-family == headings {
    @extend .font-headings;
  }
}


//
// some-component.scss
//

.some-component {
  @include font(headings);
}


//
// l10n.language.scss
//

:lang(ja) {
  .font-headings { // Localized @extend base.
    font-family: $font-stack; // Don't included the character-limited font on the stack.
  }
}

2.font-l10n.css

.font-headings,
.some-component {
  font-family: "Some Character-limited Font", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

:lang(ja) .font-headings,
:lang(ja) .some-component {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}