css - 检查 Sass/SCSS 中的单元种类以优化 CSS

Question

我正在尝试检查单位是否兼容，然后使用 calc() 或仅在预处理中计算它们。

有什么方法可以检查 Sass 中的单位类型吗？

如果我输入:

//  SCSS

test {
  content: type-of(1px);
  content: type-of(1%);
  content: type-of(1em);
}

我明白了

/*  CSS  */

test  {
  content: number;
  content: number;
  content: number;
}

有没有办法得到更像的东西:

 /*  CSS  */

test {
  content: px;
  content: percent;
  content: em;
}

它可以潜在地节省大量不必要的 CSS，这些 CSS 可以在预处理中轻松优化。

例如，当@mixin 或@function 可以采用固定或灵活的单位时:

# flexible container needs calc()
width:calc(((100vw - (12vw + 242px)) / 12) * 6 + 110px)

# fixed main container 
width:calc(((2880px - (110px + 242px)) / 12) * 6 + 110px) 
# can be calculated in SASS and rendered simply as 
width:1374px

Answer 1

我认为使用 calc() 很好，但您可以通过将原始值乘以 0、转换为字符串，然后删除零来获得单位。

@function getUnit($value) {
  @return str-slice($value * 0 + "", 2, -1);
}

演示:https://www.sassmeister.com/gist/6ac692efdbb8a28be8a3cd4346b39970

仅供引用，还有一个 unit() 函数，但文档警告说:

“This function is intended for debugging; its output format is not guaranteed to be consistent across Sass versions or implementations.”

https://sass-lang.com/documentation/modules/math#unit

如果这不是您的用例所关心的问题，那么这可能是最简单的方法。