scss文件中的无效属性[重复]答案

【问题标题】：Invalid property in scss file [duplicate]scss文件中的无效属性[重复]
【发布时间】：2021-02-07 17:30:19
【问题描述】：

在一个 scss 文件 aks-file-name.scss 中，我使用下面的代码将 css 属性放在 react 中的某个组件上

$header-height-value: 70px;

.body {
  box-sizing: border-box;
  height: calc(100% - $header-height-value);
}

它在height: calc(100% - $header-height-value); 行中的开发工具cs 无效属性中给出错误

和属性未应用于元素。如果我使用下面的代码，它就完美了

.body {
  box-sizing: border-box;
  height: calc(100% - 70px);
}

如何解决这个问题并使其以第一种方式工作，因为在代码中放置随机 70px 对未来来说不是一个好主意。

【问题讨论】：

这是您在这个特定项目中第一次使用 .scss 文件吗？你已经配置好 webpack 了吗？
是的 webpack 已配置，但是是的，我是第一次使用。

标签： html css reactjs sass

【解决方案1】：

你可以这样做：

height: calc(100% - #{$header-height-value})

模式通常是#{$name}，其中$name是声明变量的名称。

【讨论】：

它有效，但为什么我们必须在 {} 中使用#，而不是直接使用 $header-height-value
它有助于 SCSS 知道如何处理 calc，就像另一种语法一样。你可以在这里阅读更多 - https://sass-lang.com/documentation/syntax/special-functions#calc-element-progid-and-expression
3 分钟后

【解决方案2】：

就是Sass插值的概念

几乎可以在 Sass 样式表的任何地方使用插值，将 SassScript 表达式的结果嵌入到 CSS 块中。只需将#{} 中的表达式包装在以下任意位置：

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
    from { background-color: yellow }
    to { background-color: red }
  }
}

插值对于将值注入字符串很有用，但其他而在 SassScript 表达式中很少需要它。你绝对不需要它只在属性值中使用变量。而不是写颜色：#{$accent}，你可以写颜色： $口音！

为了澄清和更好的理解，请参考官方Interplation of sass

改进

calc(100% - #{$header-height-value})

【讨论】：