将单位类型附加到计算结果 [英] Append unit type to the result of a calculation

问题描述

最近我一直在将CSS重构为SASS样式表。我正在将 Mindscape Web Workbench扩展用于VS2012，每次保存SCSS时都会重新生成CSS。我从类似于以下代码开始：

I've been refactoring my CSS to a SASS style sheet recently. I'm using the Mindscape Web Workbench extension for VS2012, which re-generates the CSS each time you save your SCSS. I started with code similar to this:

/* Starting point: */
h1 { font-size: 1.5em; /* 24px ÷ 16px */ }

然后我尝试首先将其重构为：

Then I tried to refactor it first to this:

/* Recfator: */
h1 { font-size: (24px / 16px)em; }

但是不幸的是，这产生了：

But this unfortunately produces:

/* Result: */
h1 { font-size: 1.5 em; }              /* doesn't work, gives "1.5 em" */

请注意空间，我不想在那里。我尝试了几种替代方法，如下：

Notice the extra space, which I don't want there. I've tried several alternatives, here are a few:

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 */

我还尝试了使用变量的这些变体（因为无论如何我都想要），但这并没有太大改变。为了使示例中的示例更加简洁，我省略了变量。但是，我很乐意接受一个依靠使用变量（干净的方式）的解决方案。

I've also tried these variants with variables (because I want those anyways), but that didn't change the situation much. To keep the examples in this question sleek I've left out variables. However, I'd happily accept a solution that relies on using variables (in a clean way).

我经历了与 /相关的SASS文档，并感谢您这样做对SASS，因为 /字符在基本CSS中已经具有含义。无论哪种方式，我都希望有一个干净的解决方案。我在这里错过了什么吗？

I've gone through the relevant SASS documenation on '/', and appreciate that this is a tough one for SASS because the '/' character already has a meaning in basic CSS. Either way, I was hoping for a clean solution. Am I missing something here?

PS。 此博文确实使用用户定义的功能提供了一种解决方案。不过，这似乎有些沉重，因此我很想知道是否有符合我上面的尝试的更清洁的解决方案。如果有人可以解释功能方法是更好（甚至是唯一）的解决方案，那么我也将其作为答案。

PS. This blogpost does offer one solution, using a user defined function. That seems a bit heavy-weight though, so I'm interested if there's "cleaner" solutions in line with my attempts above. If someone can explain the "function approach" is the better (or even only) solution then I'll accept that as an answer too.

PS。 这个相关问题似乎是同一回事，尽管那个人特别想做进一步的计算。 在那里接受的答案是我的第三种解决方法（乘以 1em ） ，但我想知道是否有其他方法（更清洁）是否愿意放弃进行进一步计算的能力。也许上述问题（插值）中提到的方法对我有用？

PS. This related question seems to be about the same thing, though that one specically wants to do further calculations. The accepted answer there is my third workaround (multiplying by 1em), but I'd love to know if there's a different (cleaner) way if I'm willing to forego the ability to do further calculations. Perhaps the method mentioned in said question ("interpolation") is useful for me?

底部行：如何将单位类型（例如 em ）干净地追加到SASS中的计算结果中？

Bottom line: how can you cleanly append the unit type (e.g. em) to the result of a calculation in SASS?

推荐答案

向数字添加单位的唯一方法是通过算术。

执行诸如串联（例如 1 + px ）或插值（例如＃{1} px ）只会创建一个字符串，该字符串看上去像数字。即使您完全100％肯定不会在其他算术运算中使用您的值，您也不应该这样做。

To perform operations like concatenation (eg. 1 + px) or interpolation (eg. #{1}px) will only create a string that looks like a number. Even if you're absolutely 100% certain that you're never going to use your value in another arithmetic operation, you should not do this.

比无法执行算术运算更重要的是，您将无法将它们与需要数字的其他函数一起使用：

More important than not being able to perform arithmetic operations, you won't be able to use them with other functions that expects a number:

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

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

$ amount： 1％不是数字暗

$amount: "1%" is not a number for `darken'

将数字转换为字符串没有任何好处。始终使用算术（乘以1或乘以0）来添加单位：

There is nothing to be gained by casting your numbers to strings. Always use arithmetic (multiplication by 1, or addition by 0) to add a unit:

$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

Here's a mixin I wrote as part of my Flexbox mixin library that will choke if you pass in a string (for those not familiar with Flexbox, the original specification only allows integers for the box-flex property. flex: auto or flex: 30em cannot be made compatible with the comparable box-flex property, so the mixin doesn't bother trying)

@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...);
}

这篇关于将单位类型附加到计算结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！