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，那麼它會應用這些性質。如果不是，它將保持原來的定義。