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

css CSS

猿EvaL

2020-03-18

最近，我一直在将CSS重构为SASS样式表。我正在使用VS2012 的Mindscape Web Workbench扩展，每次您保存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 */

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

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. 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. 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?

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

第2154篇《将单位类型附加到计算结果》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
西门逆天猴子 2020.03.18

您可以尝试以下任一方法：

font-size: $size * 1px;

要么

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

$size您的计算结果在哪里。

卡卡西梅Harry 2020.03.18

选择您喜欢的方法

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

所使用的方法称为插值＃{}

米亚神乐Pro 2020.03.18

我假设您要问的原因是，在周围的环境中，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 摩尔水，而您想知道多少克（克），则将拥有的水量（= 50摩尔）乘以摩尔质量水（≈18 g / mol）以找出您的水样重50 mol×18 g / mol≈900克。在SASS中将像素转换为em的工作方式相同：首先要在要使用规则的情况下找出每个像素有多少em，然后将像素大小乘以px乘以该比率，以em单位表示/ px。

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

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

之所以可行，是因为SASS允许您将两个以兼容单位给出的值（例如px和cm）相加，并将结果与​​和中的第一个值以相同的单位表示。此技巧不适用于px-> em的原因是，此处的转换因子不是固定的，而是取决于周围的上下文，因此SASS不知道如何自动进行转换。

Tony小卤蛋 2020.03.18

添加单位的最佳方法是使用... * 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; //em does not include quotations

无需使用unquote或#{}此处（如其他答案中所述）！

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android