Question

我在这里正在学习Sass，并希望获得支持，以了解为什么转发variables文件时引用scss时此前缀属性不起作用。

我将dart-sass与react.js一起使用，是利用package-aliasing优于node-sass的优势，因此我可以使用@use等。

我不能在codesandbox上使用它来复制问题，因此我将代码发布在这里：

在src/library，我有2个部分scss文件和一个index.scss文件，@forward我的东西：

_variables.scss

$color: darkgreen;

_mixins.scss

@mixin box-structure {
    width: 50vw;
    height: 50vw;
    background-color: yellow;
    margin: 0;
}

index.scss

@forward 'mixins' as mix-*;
@forward 'variables' as var-*;

index.scss文件被导入到虚拟react组件中，只是为了试用这些功能并了解其工作原理。

这是 Child1.js 文件，然后是 Child1.scss 文件：

Child1.js

import React from 'react';
import './Child1.scss'

export default function Child1(props) {
    return (
        <div className="Child1">
            <h2>Child 1 Title</h2>
        </div>
    )
}

Child1.scss

@use '../library/index.scss' as i;

@function invert($color, $amount: 100%) {
    $inverse: change-color($color, $hue: hue($color) + 180);
    @return mix($inverse, $color, $amount);
  }
  
  $primary-color: #036;  

.Child1 {
    @include i.mix-box-structure; //this works as intended
    background-color: invert($primary-color);
    h2 {
        color: i.var-$color; //here is where the error occurs
}
}

如上所述，我将index.scss导入为i，并将其应用于Child1.scss中的两个位置：

当我使用它来应用mixin时，它工作得很好，但是当我尝试使用前缀来使用variable时，出现以下错误：

SassError: expected "(".
   ╷
14 │         color: i.var-$color;
   │                      ^

我猜破折号后不接受$。我尝试使用variable放置string-interpolation并没有成功。会是react.js个问题吗？

提前谢谢！

Answer 1

我认为问题在于转发前缀的应用。您需要在$之后添加它，例如：

color: i.$var-color

这看起来很奇怪，但如果我没记错的话，那么转发前缀在sass中是如何工作的。

为什么@forward命名前缀不能与使用Sass的变量一起使用？

1 个答案: