Question

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

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

我也尝试过这些带变量的变体（因为我还是想要那些），但这并没有改变这种情况。为了使这个问题中的例子保持圆滑，我遗漏了变量。但是，我很乐意接受一个依赖于使用变量的解决方案（以一种干净的方式）。

我已经浏览了relevant SASS documenation on '/'，并且明白这对于SASS来说是一个艰难的因为'/'字符在基本CSS中已经有了意义。无论哪种方式，我都希望有一个干净的解决方案。我在这里错过了什么吗？

PS。 This blogpost使用用户定义的函数提供一种解决方案。这看起来有点重量，所以我很感兴趣，如果有“更清洁”的解决方案符合我的上述尝试。如果有人能解释“功能方法”是更好（甚至是唯一）的解决方案，那么我也会接受这个答案。

PS。 This related question似乎是一回事，尽管那个人特别希望做进一步的计算。 The accepted answer there是我的第三种解决方法（乘以1em），但如果我愿意放弃进行进一步计算的能力，我很想知道是否有不同的（更清洁的）方法。也许上述问题中提到的方法（“插值”）对我有用吗？

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

Answer 1

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

执行连接（例如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属性的整数。{{1 }}或flex: auto无法与可比的flex: 30em属性兼容，因此mixin不会尝试尝试）

box-flex

Answer 2

你可以尝试其中任何一种：

font-size: $size * 1px;

或

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

$size是计算的结果。

Answer 3

选择您喜欢的方法

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

没有变数

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

仅使用变量

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

一个变量

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

使用的方法称为interpolation #{}

Answer 4

我假设你问这个的原因是因为，在周围的上下文中，1 em = 16 px，并且你想使用这种关系将目标字体大小从像素转换为ems。

如果是这样，右要做的就是将字体大小乘以缩放因子1em / 16px，如下所示：

$h1-font-size: 24px;
$body-font-size: 16px;

$body-em-scale: 1em / $body-font-size;

h1 {
  font-size: $h1-font-size * $body-em-scale;  // -> 1.5em
}

或只是：

h1 {
  font-size: $h1-font-size * (1em / $body-font-size);  // -> 1.5em
}

这也正是它在物理学中的作用：如果有50 moles水，你想知道grams中的重量是多少，你就增加了水量你有（= 50 mol）molar mass水（≈18g / mol），你的样品水重量为50 mol×18 g /mol≈900g。在SASS中将像素转换为ems的工作原理相同：首先在您打算使用规则的上下文中找出每个像素有多少个ems，然后将px中的大小乘以该比率，以em为单位表示/像素。

聚苯乙烯。当然，如果您之间转换的单位具有SASS已经知道的固定比率，那么您可以简单地让它为您自动进行转换，使用“零加技巧”。例如，如果要将字体大小从px转换为cm，则可以执行以下操作：

h1 {
  font-size: 0cm + $h1-font-size;  // -> 0.635cm
}

这是有效的，因为SASS允许您将以兼容单位（如px和cm）给出的两个值相加，并以与总和中 first 值相同的单位表示结果。这个技巧没有为px工作的原因 - ＆gt; em是这里转换因子不固定，但取决于周围的上下文，因此SASS不知道如何自动进行转换。

Answer 5

添加单位的最佳方法是使用Intent myService = new Intent(this, MyService.class); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { startForegroundService(myService); } else { startService(myService); }或... * 1em，其中... + 0em是您要获取的单位：

em

这样，它将保留为您可以在其他函数或数学运算中使用的数字。

但是，如果您希望将结果作为字符串或由于某种原因不在意结果的数值，则也可以通过以下方式简单地获取它：

font-size: (24px/16px) + 0em; // ... + 0px for px
//or
font-size: (24px/16px) * 1em; 
//both produce: font-size: 1.5em;

无需在此处使用font-size: (24px/16px) + em; //font-size: 1.5em; //not em does not include quotations或unquote（如其他答案中所述）！

将单位类型附加到计算结果

5 个答案: