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

Question

在scss文件中，使用aks文件名。我使用下面的代码将css属性放在react中的某个组件上

$header-height-value: 70px;

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

它在dev tools cs invalid属性的height:calc（100%-$header height值）行中给出了一个错误

和属性未应用于元素。如果我使用下面的代码，它将完美地工作

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

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




Answer 1

这是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}，你可以只写颜色：$accent！

有关澄清和更好的理解，请参阅sass的官方互动

改进

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

Answer 2

你可以这样做：

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

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