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;
}

它基本上为所有东西添加了“颜色 - ”。我在这里做错了什么？

Answer 1

解决方案：有空间应该有标签。一旦我删除空格并用标签替换它们，一切都正确编译。

SASS（.sass）为什么这个变量搞砸了一切？

1 个答案: