最近、CSS を SASS スタイル シートにリファクタリングしています。SCSS を保存するたびに CSS を再生成する VS2012 用のMindscape Web Workbench 拡張機能を使用しています。次のようなコードから始めました。
/* Starting point: */
h1 { font-size: 1.5em; /* 24px ÷ 16px */ }
次に、最初にこれをリファクタリングしようとしました:
/* Recfator: */
h1 { font-size: (24px / 16px)em; }
しかし、これは残念ながら次のようになります。
/* Result: */
h1 { font-size: 1.5 em; } /* doesn't work, gives "1.5 em" */
私がそこに欲しくない余分なスペースに注意してください。私はいくつかの代替案を試しましたが、ここにいくつかあります:
h1 { font-size: (24/16)em; } /* doesn't work, gives "1.5 em" */
h2 { font-size: 24 / 16em; } /* doesn't work, gives "24/16em" */
h3 { font-size: (24px / 16px) * 1em; } /* works but "* 1 em" feels unnecessary */
h4 { font-size: (24em) / 16; } /* works, but without "px" it's not
really conveying what I mean to say */
変数を使用してこれらのバリアントも試しましたが(とにかくそれらが必要なので)、状況はあまり変わりませんでした。この質問の例を洗練されたものにするために、変数を省略しました。ただし、変数の使用に依存するソリューションを(クリーンな方法で)喜んで受け入れます。
'/' に関連する SASS ドキュメントを確認しましたが、'/' 文字は基本的な CSS で既に意味を持っているため、これが SASS にとって難しいものであることを理解しています。いずれにせよ、私はクリーンなソリューションを望んでいました。ここで何か不足していますか?
PS。このブログ投稿は、ユーザー定義関数を使用して 1 つのソリューションを提供します。ただし、それは少し重いように思えるので、上記の試みに沿った「よりクリーンな」ソリューションがあるかどうかに興味があります。誰かが「関数アプローチ」がより良い(または唯一の)解決策であると説明できる場合は、それも答えとして受け入れます。
PS。この関連する質問は同じことのようですが、具体的にはさらに計算を行いたいと考えています。そこで受け入れられた答えは私の3番目の回避策( を掛ける1em
)ですが、それ以上の計算を行う能力を放棄しても構わないと思っているなら、別の(よりクリーンな)方法があるかどうか知りたいです。おそらく、上記の質問で言及されている方法(「補間」)は私にとって役に立ちますか?
結論: SASS の計算結果に単位の種類 (例: ) をきれいに追加するにはどうすればよいでしょうか?em