如何操縱Angular2組件中的scss變量

有沒有辦法可以改變在Angular2組件中聲明的scss變量？我想基於用戶選擇動態添加主題，因此需要修改scss變量。我閱讀了有關將所有scss變量保存在單獨的scss文件中並將其導入到其他scss文件中的情況。但是，我可以在我的組件文件中導入相同的內容並修改變量。這是可行的嗎？ TIA如何操縱Angular2組件中的scss變量

目前我正在使用mixin。代碼去這裏：

// Color themes 
$themes: (
    default: #ff0000, 
    banana: #f1c40f, 
    cherry: #c0392b, 
    blueberry: #8e44ad, 
    leaf: #27ae60, 
    nightsky: #2980b9 
); 


// Helper theme mixin 
@mixin theme($name, $color) { 
    .#{$name}{ 
     background-color: lighten($color, 30%); 
    } 
    .#{$name} { 
    h1{ 
     color: $color; 
    } 
    } 
    .#{$name} { 
    nav{ 
     a{ 
     color: $color; 
     } 
    } 
    } 
}

但是有沒有一種方法，我可以改變Angular組件的$主題地圖內的變量。

來源

2016-11-08 Vishal Gulati

這是不可能薩斯性質：這是一個建立時間的工具，預處理器。 Angular只知道CSS（儘管Component元數據中的styles和styleUrls屬性）。

這意味着當Angular掌握了你的風格之後，Sass已經被編譯爲CSS。您不能在運行時間中更改Sass變量，因爲它們在此時不再存在，因爲它們不再存在。

您可改爲使用custom properties並通過常規JavaScript更改它們。

來源

2017-09-01 22:08:21

如何操縱Angular2組件中的scss變量

回答

相關問題