css - SASS (.sass) 为什么这个变量把一切都搞砸了？

Question

我是 sass 的新手，我无法弄清楚为什么这个特定的变量实例会弄乱我的 .css 输出。我使用 Atom.io 作为我的文本编辑器，使用插件 sass-autocompile 作为我的 sass 编译器。

这是我的代码

萨斯:

$white: #fdfcfc
$black: #040A14

.dark-btn
  color: $white
  display: block
  font-weight: bold
  margin: auto
  background: $black
  padding: 10px
  width: 200px
  text-align: center
  &:hover
    background: $gray
    animation-name: popUp
    animation-fill-mode: forwards
    animation-duration: 200ms

编译后得到:

.dark-btn {
  color: #fdfcfc;
  color-display: block;
  color-font-weight: bold;
  color-margin: auto;
  color-background: #040A14;
  color-padding: 10px;
  color-width: 200px;
  color-text-align: center;
}

.dark-btn:hover {
  background: #333;
  animation-name: popUp;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
}

它基本上是为所有内容添加“color-”。我在这里做错了什么？

Answer 1

解决方案:在应该有制表符的地方出现了空格。一旦我删除了空格并用制表符替换了它们，所有内容都已正确编译。