Question

我正在努力让这个工作起来，我不知道为什么没有工作，因为这是SCSS的特质之一：

这是HTML：

<div class="btn btn-wrapper">
   <div class="btn-container mob-only">
      <a class="btn btn-red" href="#" target="_blank">
         <span class="mob-only">Schedule Appointment</span>
      </a>
   </div>
</div>

SCSS：

.btn {
    &-wrapper {
        width: 100%;
        // border: 1px solid red;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: -7vw 0px;
        &-container {
            &-red {
                color: white;
                background: $red;
                padding: 10px;
                width: 85%;
                border-radius: 0;
                margin: 10px;
                font-size: 7vw;
            }
        }
    }
}

我做错了什么？

Answer 1

＆amp; - 会将父选择器添加到规则之前。

所以，

＆amp; -wrapper将是.btn-wrapper
＆amp; -container将是.btn-wrapper-container
＆amp; -red将为.btn-wrapper-container-red

你可以通过减少嵌套来解决它，但如果你只想在.btn-container中选择.btn-red，这将无济于事。

要选择最相关的元素并具有与您相同的嵌套结构，可以在父选择器中创建变量名称并在嵌套中指定它。我已经添加了以下两种方法。

方法1

 .btn {
      &-wrapper {
        width: 100%;
        // border: 1px solid red;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: -7vw 0px;
      }
      &-red {
         color: white;
         background: $red;
         padding: 10px;
         width: 85%;
         border-radius: 0;
         margin: 10px;
         font-size: 7vw;
      }
    }

方法2

 .btn {
      $root: &;
      #{$root}-wrapper {
        width: 100%;
        // border: 1px solid red;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: -7vw 0px;
        #{$root}-container {
          #{$root}-red {
            color: white;
            background: 'red';
            padding: 10px;
            width: 85%;
            border-radius: 0;
            margin: 10px;
            font-size: 7vw;
          }
        }
      }
    }

Answer 2

所有选择器都是嵌套的，并且按名称相互扩展。在您的情况下，您将生成三个类.btn，.btn-wrapper和.btn-wrapper-container-red。

您可能希望这样做：

.btn {
  &-wrapper { ... }
  &-container { ... }
  &-red { ... }
}

这将生成四个类.btn，.btn-wrapper，.btn-container和.btn-red。

Answer 3

乍一看，您以错误的方式嵌套选择器，您的代码为x0，btn-wrapper，btn-wrapper-container生成样式，这将生成btn-wrapper-container-red {{1} } btn-wrapper选择器：

HTML：

btn-container

SCSS：

btn-red

为什么这不适用于SCSS

3 个答案: