Question

我有以下风格：

.black-theme, .light-theme {
   .popup {
     $root: &;
     color: red;
     &--red {
       #{$root}__close-button {
         fill: red;
       }
     }
   }
}

生成为：

.black-theme .popup--red .black-theme .popup, .black-theme .popup--red .light-theme .popup__close-button, .light-theme .popup--red .black-theme .popup, .light-theme .popup--red .light-theme .popup__close-button {
  fill: red;
}

如何修复它并获得正确的代码：

.black-theme .popup--red .popup__close-button, .light-theme .popup--red .popup__close-button {
  fill: red;
}

Answer 1

怎么样：

.black-theme, .light-theme {
   .popup {
     $root: '.popup';
     color: red;
     &--red {
       #{$root}__close-button {
         fill: red;
       }
     }
   }
}

Answer 2

You could also use this approach. & is a sass list of lists referencing to all the parent elements for the current selector, so you can use all the list functions on & and easily get the nth child of & of your choice (in this case de second one):

.black-theme, .light-theme {
    .popup {
        $root: nth(nth(&, 1), 2); // Get just the second selector: .popup
        color: red;
        &--red {
            #{$root}__close-button {
                fill: red;
            }
        }
    }
}

Hope it helps!

在主题包装代码（SASS）

2 个答案: