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

Posted 2023-03-06

【中文标题】scss文件中的无效属性[重复]

【英文标题】：Invalid property in scss file [duplicate]

【发布时间】：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 已配置，但是是的，我是第一次使用。

【参考方案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)