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那样在页面上加载了什么。

一旦编译完成，Sass就会变成静态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内，那么它将应用这些属性。如果没有，它将保持原来的定义。

SCSS / SASS条件化变量

1 个答案: