SCSS導入文件沒有導入

Question

所以我遇到了一些奇怪的事情..我使用7-1模式來滿足我的CSS需求。對於那些不熟悉的人，你可以在這裏閱讀：https://sass-guidelin.es/

我有一個_variables.scss文件，我有一些css變量聲明。我的問題是，我可以在其他.scss文件中訪問這些變量，而無需在該特定文件中使用import語句。誰能解釋爲什麼？

編輯：我的猜測是我有一個main.scss文件，SCSS正在監視哪個導入所有其他文件。當CSS試圖被轉發時，變量在其他文件中可用？

Answer 1

我會假設你有一個主導入文件，喜歡的東西：

@import 'variables' 
@import 'base' 
@import 'some_component' 
@import 'some_other_component' 

的原因，你的變量是提供給您的其他樣式表是進口級聯。因此，只要導入variables，之後導入的所有內容與這些變量（因爲它們已被導入）的範圍相同。

這可能是一個祝福和詛咒，因爲您在任何其他樣式表中定義的範圍之外的任何變量也將成爲全局可用於導入其後的所有樣式表。

正因爲如此，人們普遍認爲是最佳做法導入的是全球性的，在你的主要進口樣式表的最頂端的所有變量，然後塊範圍，你不希望暴露任何當地變量全球範圍內，像這樣：

.SomeComponent { 
    $height: 100px; // this is only accessible from within this block, and children of this block; 

    .SomeComponent-child { 
    height: $height; 
    } 
} 

相反，在_variables.scss定義的變量將是隨處可見，所以你也可以這樣做：

.SomeComponent { 
    $height: $global-height; // `$global-height` defined in `_variables.scss` 

    .SomeComponent-child { 
    height: $height; 
    } 
}