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

Question

我最近一直在重构我的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 */

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

我已经浏览了'/'上相关的SASS文档,并且理解这对于SASS来说是一个艰难的文件,因为'/'字符在基本CSS中已经有了意义.无论哪种方式,我都希望有一个干净的解决方案.我在这里错过了什么吗？

PS.这篇博文提供了一个使用用户定义函数的解决方案.这看起来有点重量,所以我很感兴趣,如果有"更清洁"的解决方案符合我的上述尝试.如果有人可以解释"功能方法"是更好(甚至是唯一)的解决方案,那么我也会接受这个答案.

PS.这个相关的问题似乎是一回事,尽管那个人特别希望做进一步的计算.接受的答案是我的第三个解决方法(乘以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属性的整数. flex: auto或者flex: 30em不能与类似的box-flex属性兼容,所以mixin不打扰尝试)

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

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

使用的方法称为插值#{}

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 摩尔的水,你想知道以克为单位的重量,你可以将你的水量(= 50摩尔)乘以摩尔质量水(≈18g/mol),以确定您的水样重量为50 mol×18 g /mol≈900g.在SASS中将像素转换为ems的工作原理相同:首先在您打算使用规则的上下文中找出每个像素有多少个ems,然后将px中的大小乘以该比率,以em为单位表示/ PX.

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

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

这是有效的,因为SASS允许您将以兼容单位(如px和cm)给出的两个值相加,并且将以与总和中的第一个值相同的单位表示结果.这个技巧不适用于px - > em的原因是这里转换因子不是固定的,而是取决于周围的上下文,因此SASS不知道如何自动进行转换.