css - SASS 放置双重属性名称，为什么？

Question

在 SASS 中乱搞，但是当我的样式表正在编译时，它会生成这个奇怪的、无效的 css。

.container     
        padding: 3rem 2.5rem 3rem
        background-color: red

因为它可以很好地独立编译，所以它必须是评论中指出的周围的 sass。如果有什么关系，那就是 angular 5 元素:

周围的sass:https://pastebin.com/tMMxf97D

我做错了什么？

Answer 1

您有一些额外的空格和不一致的制表符。我添加变量只是为了测试。 Check my rearranged code

$prim: #cccccc
$dark-prim: #666666
$grey: grey

#wrapper
  background: #F7F7F7

  .tournament-card 
    background: #fff
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.11)

    .card-title 
      background-color: $dark-prim
      padding: 2rem

      h1
        color: #fff
        text-align: center
        font-size: 1.2rem

    .container
      padding: 3rem 2.5rem 3rem
      background-color: red

    .options
      color: $grey
      margin-bottom: 1.5rem

    button
      cursor: pointer
      font-size: 1.2rem
      color: $prim
      border-radius: 4rem
      display: block
      width: 100%
      background: transparent
      border: 2px solid $prim
      padding: 0.9rem 0 1.1rem
      transition: color .5s, border-color .5s
      margin-top: 3rem

      &:hover,
      &:focus
        background: $dark-prim
        color: white

      &:active
        transform: translateY(1px)