SCSS/SASS的条件变量

Question

我想看看是否有一种方法来条件化我的scss变量。这个场景是当所有字体被加载时，一个后备字体加载器在我的身体上抛出一个类 - 所以我可以转换出字体。

这样的想法是我有我的_variables.scss文件中设置了，里面有我的所有网站的字体看起来像这样 -

$primary-font-family: 'Font1', sans-serif; 
$primary-font-normal: 400; 
$primary-font-bold: 700; 

$secondary-font-family: 'Font2', serif; 
$secondary-font-normal: normal; 
$secondary-font-bold: normal; 

这一直是我工作的伟大，但我期待一个简单的方法来将它们交换出来，而不需要在CSS中添加类监听器，以便使用这些字体的每个实例。所以，我想知道是否有可能是条件化这些变量的方式 -

// if .fonts-loaded class is on body, use loaded font 
$primary-font-family: 'Font1', sans-serif; 
// else use system default font 
$primary-font-family: 'defaultSystemFont', sans-serif; 

不确定的，如果这样的事情是可能的，没有人知道的方式来实现这一目标。谢谢阅读！

Answer 1

Sass永远不会知道是否像JS一样加载页面上的东西。

一旦编译，萨斯成为静态CSS和不根据页面上所做的更改必然交流（超出知道它应该根据预先定义的伪类样式的事情一定的方式。）

此外，我们越是告诉页面“思考得越多” - 在加载时间方面受益越少。

由于CSS是“层叠”，你总是可以设置默认的字体堆栈，如：

.stuff {color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 1em;} 

......然后，在CSS（可能范围内的部分是在全球布局后，进口低，作为主题的一部分）：

.stuff {font-family: "SuperSpecialFont";} 

然后，它将载入，因为它读取，设置默认基础，然后逐步增强它。 Sass永远不会意识到一个页面的加载状态，然而，它会根据什么可用和什么时候提供样式 - 这可以让你有一个回退，直到它应该呈现的所有内容都到位。

===

根据您的意见，似乎没有要在这种情况下，有条件的理由。

基本的CSS会处理它.thisClass .thatClass或.thisClass > .thatClass - 取决于你想成为多么严格。因此，例如，在萨斯：

.thatClass { 
    color: #333; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1em; 
} 

.thisClass { 
    .thatClass { 
     font-family: 'SuperSpecialFont'; 
    } 
} 

如果它嵌套的内部.thisClass，那么它会应用这些性质。如果不是，它将保持原来的定义。