SASS 导出到 React 之前未计算变量

Question

src/components/data/_variables.module.scss

$carousel-width: 1000px;
$slides-amount: 4;
$carousel-width: min($carousel-width, ( calc(100vw - 100px) ));
$slide-width: calc($carousel-width/$slides-amount);
:export {
     slideWidth: $slide-width;
}

src/components/Carousel/Carousel.component.jsx

import vars from "../../data/_variables.module.scss"
/*... other imports ...*/

class Carousel extends Component {
    constructor(props) {
        super(props);
        this.slideWidth = vars.slideWidth;
        this.state = { ...... // the rest of the code

之前我对 slideWidth 使用硬编码变量，它工作正常。

但是当我试图计算它们以获得更好的移动样式支持时，我注意到虽然 scss 可以正确计算所有内容，但它以某种方式不是计算结果，而是将整个等式作为字符串传递给 React。

结果我得到 'calc(min(1000px, 100vw - 100px) / 4)' 字符串而不是必需的变量。同时，我将 $carousel-width 导出到另一个 scss 文件，它的行为正确（根据初始值和屏幕宽度更改值）。

TL;DR：如何在导出变量之前强制 SCSS 计算变量？

Answer 1

我想你应该明白 sass 是如何工作的。

在某些情况下 Sass 不会计算变量，直到您将它们写入 #{$var1 * $var2}

除法你必须使用 'sass:math' 模块。

有些值无法计算，例如 100vh - 100px

你会得到错误。因为他们是不兼容的单位。

希望你明白了。

SASS 导出到 React 之前未计算变量

SASS variable is not calculated before exporting to React

css

reactjs

sass