2017-10-30 5 views
0

私はプロジェクトでいくつかのCSSプリプロセッサを使い、スタイラスを選択しようとしています。両方の値が変数である場合にこれが意外変わることができるスタイラスでユニットの安全を確保するにはどうすればよいですか?

body { 
    width: 150%; 
} 

:これに

body { 
    width: 100% + 50px; 
} 

:今日、私はスタイラスがこれをコンパイルすることを発見しました。例えば、私はこのように私のルールでは、いくつかの表現がある場合:

my-element { 
    width: $some-value + $some-other-value + $some-more-value; 
} 

を、私は、この変数のいずれかの単位を変更した場合、例えば、画素からpersentsに、すべての式は静かに壊れてしまいます。だから私がユニットを変更したいのであれば、この変数のすべての用途をプロジェクト全体で見直し、それが大丈夫かどうかをチェックしなければなりません。

スタイラスで何らかのユニットの安全性をアーカイブする方法はありますか?スタイラスがこのような状況のためにcalc(100% + 50px)を生成し、私にコンソールに警告を与えるなら、完璧な解決策になります。しかし、ただの警告やエラーでさえ十分です。

答えて

1

スタイラスバージョンではなくネイティブCSS calcを使用する場合は、sprintfを使用して達成することができます。これは、スタイラスがユニットを変換して数式を処理する方法とは異なり、期待どおりの異なるユニットを解決します。例:

width: 'calc(%s + %s + %s)' % ($some-value $some-other-value $some-more-value) 
関連する問題