Question

当我将这个sass复制并粘贴到在线sass转换器中时，我得到一个奇怪的错误，因为原始项目有效。你能发现错误吗？我不能。它通常可以直接使用。这是codepen.io上的工作项目：https://codepen.io/LandonSchropp/pen/xLtif

html, body, h1

height: 100%
width: 100%

body
transition: background-color 0.3s ease-in
font-family: 'Open Sans', sans-serif
background-color: hsl(350, 100%, 50%)

// in firefox, a transformed element causes a scroll when it extends beyond the element's size, so we'll disable it
overflow: hidden

font-size: 12px

@media (min-width: 480px)
font-size: 14px

@media (min-width: 640px)
font-size: 16px

.word
font-family: 'Bangers', cursive

svg
height: 100%
width: 100%
position: relative
top: -1rem
animation: pop-out 2s ease-in-out infinite

.word
font-family: 'Bangers', cursive
letter-spacing: 0.05em
color: white
padding: 0.5em

font-size: 28px

@media (min-width: 480px)
font-size: 36px

@media (min-width: 640px)
font-size: 48px

@media (min-width: 960px)
font-size: 64px

@media (min-width: 1280px)
font-size: 84px

p
position: fixed
bottom: 0
left: 0
right: 0
line-height: 2rem

text-align: center
color: transparentize(white, 0.25)
background-color: transparentize(#222, 0.0)

@keyframes pop-out
0%
transform: scale3d(0, 0, 1)
opacity: 1
25%
transform: scale3d(1, 1, 1)
opacity: 1
100%
transform: scale3d(1.5, 1.5, 1)
opacity: 0

a, a:visited
color: inherit

https://www.sassmeister.com/

确切的编译器错误是Invalid CSS after " color: inherit": expected "{", was ""

Answer 1

这里有两个问题：

您需要更改为Sass语法，因为默认情况下它在SCSS上不允许省略括号（这是错误消息告诉您的内容）

一旦你这样做，你会得到一个更有帮助的错误：

属性仅允许在规则，指令，mixin包含或其他属性中使用。

这是因为Sass解释器期望块内的属性缩进^[1]。如果您的解释器正在处理您的代码而没有任何错误，无论是否缩进，它都不会严格执行Sass语法规范。尝试下面的代码，它完全相同，但添加了标签：

html, body, h1

  height: 100%
  width: 100%

body
  transition: background-color 0.3s ease-in
  font-family: 'Open Sans', sans-serif
  background-color: hsl(350, 100%, 50%)

  // in firefox, a transformed element causes a scroll when it extends beyond the element's size, so we'll disable it
  overflow: hidden

  font-size: 12px

@media (min-width: 480px)
  font-size: 14px

@media (min-width: 640px)
  font-size: 16px

.word
  font-family: 'Bangers', cursive

svg
  height: 100%
  width: 100%
  position: relative
  top: -1rem
  animation: pop-out 2s ease-in-out infinite

.word
  font-family: 'Bangers', cursive
  letter-spacing: 0.05em
  color: white
  padding: 0.5em

  font-size: 28px

@media (min-width: 480px)
  font-size: 36px

@media (min-width: 640px)
  font-size: 48px

@media (min-width: 960px)
  font-size: 64px

@media (min-width: 1280px)
  font-size: 84px

p
  position: fixed
  bottom: 0
  left: 0
  right: 0
  line-height: 2rem

  text-align: center
  color: transparentize(white, 0.25)
  background-color: transparentize(#222, 0.0)

@keyframes pop-out
  0%
    transform: scale3d(0, 0, 1)
    opacity: 1
  25%
    transform: scale3d(1, 1, 1)
    opacity: 1
  100%
    transform: scale3d(1.5, 1.5, 1)
    opacity: 0

a, a:visited
  color: inherit

SassMeister在线翻译：无效的CSS，预期“{”，是“”

1 个答案: