vscode 中预期的 CSS 错误规则或选择器

Question

我从网站上复制了一些 css 代码，但这部分给我错误

.pricing-table:hover{
  box-shadow: 0px 0px 19px -3px rgba(0,0,0,0.36);
  /*error starts from this line*/
  .pricing-table__button{
    padding-left: 0;
    padding-right: 35px;
    .pricing-table__button:before{
      top: -80%;
      transform: rotate(0deg);
      width: 100%;
    }
    .pricing-table__button:after{
      opacity: 1;
      padding-right: 15px;
    }
  }
}

请问是不是css代码有问题

来源:https://codepen.io/DigimadMedia/pen/qZdMzd

Answer 1

您在问题中发布的代码是 SASS。您必须将此 css 代码转换为普通 css。

正常的css代码如下:

.pricing-table:hover{
  box-shadow: 0px 0px 19px -3px rgba(0,0,0,0.36);
}
.pricing-table:hover .pricing-table__button:before{
  top: -80%;
  transform: rotate(0deg);
  width: 100%;
}
.pricing-table:hover .pricing-table__button:after{
  opacity: 1;
  padding-right: 15px;
}
.pricing-table:hover .pricing-table__button{
  padding-left: 0;
  padding-right: 35px;
}