SASS把双重属性名称,为什么?

时间:2018-05-09 20:17:59

标签: css sass

在SASS中乱七八糟但是当我的样式表正在编译时,它会生成这个奇怪的,无效的CSS。

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

enter image description here

由于这可以很好地孤立编译,因此必须是注释中指出的周围sass。如果重要的是它是一个有角度的5项目:

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

我做错了什么?

1 个答案:

答案 0 :(得分: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)