样式组件 + SCSS

【问题标题】：Styled-components + SCSS样式组件 + SCSS
【发布时间】：2020-05-20 09:15:54
【问题描述】：

我需要根据容器高度实现动态线夹。我要实现的解决方案是：

const Component = styled.div`
@use 'sass:math';

  display: -webkit-box;
  -webkit-line-clamp: floor(calc(100% / 20));
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 100%;
`

但检查员将floor(calc(100% / 20)); 指示为无效属性。

您有什么想法可以完成这项工作吗？

【问题讨论】：

标签： javascript sass styled-components

【解决方案1】：

我认为你应该颠倒函数（计算和地板）的顺序。因为 calc(100% / 20) 不返回数字，而函数 floor 需要一个数字作为参数。

 body {
      @use 'sass:math';
      display: -webkit-box;
      -webkit-line-clamp: calc(floor(100% / 20));
      -webkit-box-orient: vertical;
      overflow: hidden;
      max-height: 100%;
    }

我在实时 SASS 编辑器中对其进行了测试，请查看：https://www.sassmeister.com/gist/24b2639cd1680c0ceceb37f910654efe

【讨论】：