70

最近、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

4

5 に答える 5

79

数値に単位を追加する唯一の方法は、算術を使用することです。

連結 (例: 1 + px) や補間 (例: ) などの操作を実行すると、数値のように見える文字列#{1}pxのみが作成されます。別の算術演算で値を使用しないことが 100% 確実である場合でも、これを行うべきではありません

算術演算を実行できないことよりも重要なのは、数値を必要とする他の関数でそれらを使用できないことです。

$foo: 1; // a number
$foo-percent: $foo + '%'; // a string

.bar {
    color: darken(blue, $foo-percent); //Error: "1%" is not a number!
}

$amount: "1%" は「暗くする」ための数値ではありません

数値を文字列にキャストしても何も得られません。単位を加算するには、常に算術演算 (1 による乗算、または 0 による加算) を使用します。

$foo: 1; // a number
$foo-percent: $foo * 1%; // still a number! //or: $foo + 0%

.bar {
    color: darken(blue, $foo-percent); //works!
}

出力:

.bar {
  color: #0000fa;
}

これは、Flexbox mixin ライブラリの一部として私が書いた mixin で、文字列を渡すとチョークします (Flexbox に慣れていない方のために説明すると、元の仕様ではプロパティに整数のみが許可されてbox-flexいる flex: autoか、同等のプロパティflex: 30emと互換性を持たせることができないため、box-flexミックスインはわざわざ試しません)

@mixin flex($value: 0 1 auto, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
    @if $legacy and unitless(nth($value, 1)) {
        @include legacy-flex(nth($value, 1));
    }

    @include experimental(flex, $value, flex-support-common()...);
}

@mixin legacy-flex($value: 0) {
    @include experimental(box-flex, $value, $box-support...);
}
于 2012-12-16T21:23:43.140 に答える
46

次のいずれかを試すことができます。

font-size: $size * 1px;

また

font-size: $size + unquote("px");

$size計算の結果はどこにありますか。

于 2015-08-27T11:24:41.947 に答える
21

お好きな方法をお選びください

$font: 24px;
$base: 16px;

変数なし

.item1 { font-size: #{(24px / 16px)}em; }

変数のみを使用する

.item2 { font-size: #{$font / $base}em; }

1 つの変数

.item3 { font-size: #{$font / 16px}em; }
.item4 { font-size: #{24px / $base}em; }

それらすべての出力

.item1 { font-size: 1.5em; }
.item2 { font-size: 1.5em; }
.item3 { font-size: 1.5em; }
.item4 { font-size: 1.5em; }

使用される方法は補間と呼ばれます #{}

于 2012-12-20T16:44:42.707 に答える