样式组件 + SCSS

Question

I need implement dynamic line-clamp, depending on container height. The solution I want to implement is:

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%;
`

but inspector indicates floor(calc(100% / 20)); as invalid property.

Do you have any ideas how to make this work?

Answer 1

I think you should invert the functions (calc and floor) order. Because calc(100% / 20) doesn't return a number and the function floor requires a number as parameter.

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

I tested it in a live SASS editor, check it out: https://www.sassmeister.com/gist/24b2639cd1680c0ceceb37f910654efe