scoping les variables SCSS @ font-face pour une utilisation avec Observer la police Visage

Question

Je maintiens donc un site où nous utilisons la police face Observer: https://fontfaceobserver.com - nous définissons actuellement les polices comme ceci:

$serif: Georgia, Times, 'Times New Roman', serif; 
$serifFontface: 'Chronicle Display', $serif; 

%serif { 
    font-family: $serif; 
    .fonts-loaded&{ 
    font-family: $serifFontface; 
    } 
} 

Nous sommes maintenant dans le processus de modifier la base de code pour l'utiliser comme un site multilingue, où il y aura toujours tous les deux caractères kanji romains et japonais sur une page.

Nous avons une classe de corps .isJa et j'ai essayé la portée de ce genre, mais le fontface Kanji apparaît dans la pile même sans la classe d'être présent sur le corps:

$serif: Georgia, Times, 'Times New Roman', serif; 

.isJa{ 
    $serif: 'hiragino kaku gothic pro', Georgia, Times, 'Times New Roman', serif; 
} 

$serifFontface: 'Chronicle Display', $serif; 

%serif { 
    font-family: $serif; 
    .fonts-loaded &{ 
    font-family: $serifFontface; 
    } 
} 

Comment/est-il possible d'atteindre les résultat souhaité? c'est-à-dire que la police hiragino est seulement déclarée lorsque .isJa est présente, mais est déclarée initialement et également lorsque Font Face Observer applique la classe .fonts-loaded. Je devrais probablement ajouter que nous sommes limités à Sass v3.2.6

Answer 1

Vous avez été mordu par @extend. Les règles étendues ne sont générées qu'une seule fois - au moment exact où vous déclarez l'espace réservé en%. Changer les variables plus tard ne les affectera pas. C'est (une des raisons) pourquoi l'utilisation de @extend en général est déconseillée.

Ce que vous devez faire est d'utiliser un mixin qui a un jeu de paramètres par défaut à votre valeur de variable initiale.

code:

$serifFontface: 'Chronicle Display'; 

@mixin fontFallback($fallback: (Georgia, Times, 'Times New Roman', serif)) { 
    font-family: $fallback; 
    &.fonts-loaded { 
    font-family: $serifFontface, $fallback; 
    } 
} 

body { 
    @include fontFallback; 
} 

.isJa { 
    $japaneseFallback: 'hiragino kaku gothic pro', Georgia, Times, 'Times New Roman', serif; 
    @include fontFallback($japaneseFallback); 
} 

Sortie:

body { 
    font-family: Georgia, Times, "Times New Roman", serif; 
} 
body.fonts-loaded { 
    font-family: "Chronicle Display", Georgia, Times, "Times New Roman", serif; 
} 

.isJa { 
    font-family: "hiragino kaku gothic pro", Georgia, Times, "Times New Roman", serif; 
} 
.isJa.fonts-loaded { 
    font-family: "Chronicle Display", "hiragino kaku gothic pro", Georgia, Times, "Times New Roman", serif; 
} 

En savoir plus sur mixins et étend here et here.