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

问题描述

最近我一直在将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 )之类的操作，只会创建字符串.即使您绝对百分百地确定您永远不会在其他算术运算中使用您的值，您也不应这样做.

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

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