2017-03-19 1 views
1

私はSass mixinを定義し、それをクラススタイリングで使用しました。私はテンプレートでクラスを使用しています。私は実行時に色を決定する必要があります。だから私はmixinを無効にしようとしています。しかし、最初にmixinで定義した色は#ff0000です。ビューテンプレートのSass mixinを動的にオーバーライド

何らかの理由でI can't use an extra class、このシナリオでは最高の解決策があります。

マイスタイルシートapp.scss

@mixin mx-color { 
    color: #ff0000; 
} 
.my-color { 
@include mx-color; 
} 

角度テンプレートビューapp.html.haml

:css 
    @mixin mx-color { 
    color: {{custom_color}}; // custom_color contains hex-color to replace 
} 
%body 
    %p.my-color 
    This text must show-up in custom color but its showing the default color. 
+0

オーバーライドしようとしているテキストスタイルなどの質問にコードを追加してください。それはp {}かそれ以上のものですか? –

+0

はい@NathanielFlick。この例では、この段落タグにテキストスタイルを適用したいと考えています。 –

+0

はい、私は知っていますが、ここで他にどのようなスタイルがありますか?あなたの例は潜在的な衝突を示していないので、あなたの例には示されていないいくつかのコードでなければなりません。良い質問を策定する方法については、これをお読みください:http://stackoverflow.com/help/how-to-ask –

答えて

0

コンパイルされたHTML/CSSの出力を確認してください。 mixinを上書きしてmixinが自動的に更新されるSASSブロックがあるとは思えません。

関連する問題