如何在一頁中重寫Ionic2 sass變量？

Question

我試圖重寫青菜變量variables.css這樣

，但它不是我想要的。

它似乎改變了所有標籤的樣式。

Answer 1

您只需按照以下所示在您需要應用的頁面組件上執行操作。

my.scss

.ios, 
.md, 
.wp { 
    page-my { 
     .margin-top-15 { 
      margin-top: 15px;//this is just an example 
     } 

    } 
} 

Answer 2

目前，是不可能覆蓋在一個頁面一個SASS變量，它根本不起作用。

這是離子論壇上報告了類似的問題的迴應：

https://github.com/ionic-team/ionic/issues/7469

一個有用的解決方案是離子服務你的項目中，打開檢查您的瀏覽器，檢查所需元素並查看其離子生成類別在.scss文件中手動覆蓋。

Answer 3

當前，您無法在一個頁面中更改sass變量。這不僅僅是sass的作用。 Sass旨在用作全球設置。

有一個工作要改變，比如說一個加載容器的背景。

您可以爲此做到最多。

如果您打開開發人員工具並在加載包裝上選擇檢查元素，它將提供類.loading-wrapper，如下面的圖像鏈接所示。

css class for loading shown in inspect element

在你app.css

.loadingCss { 

    .loading-wrapper { 
    color: #f4f4f4; 
    background: #2979ff; 
    } 
} 

在組件TS

添加類到您加載創建實例

//initialize a loading overlay 
let working = this.loadingCtrl.create({ 
    content: 'Working...', 
    spinner: 'dots', 
    cssClass: 'loadingCss' 
}); 

現在你可以創建裝載的多個實例，並有單獨的類加載並將它們添加到您的實例和CSS將生效。

最終結果顯示在下面的圖像鏈接中。

Loading overlays with custom css on two pages

我希望這有助於