在嵌套结构中使用SASS / SCSS更改.js类

杰克·胡

快速（希望如此）。

我有类似的东西：

.front-cards-content {
  .front-card-content {
    &:nth-of-type(2n+1) {
      .card-content-icon {
        strong {
          &:hover {
            // Do something...
          }
        }
      }
    }
  }
}

如您所见，它们// Do something大量嵌套在相关的父级中。

如果我想确保只有在启用JavaScript时才发生某些事情，我可以使用.js附加到<html>标签上的类。

但是，无论是否.js存在该开关，此层次结构中的所有其他内容都应该可用。

我知道我可以简单地复制并粘贴整个内容，并将其添加.js到嵌套类的开头，但这似乎非常不直观。

有办法解决这个问题吗？要以某种方式将其添加.js到我正在使用的层次结构的根中，而无需全部复制并粘贴（这可能导致维护问题）？

davidpauljunior

您可以使用SASS和号父选择器。它将查找.js类作为顶部选择器（.front-cards-content）的任何父级，例如，如果您有<html class="js">。

.front-cards-content {
  .front-card-content {
    &:nth-of-type(2n+1) {
      .card-content-icon {
        strong {
          &:hover {
            // Do something...
            .js & {
              // Do something different if JS is a parent of top selector (e.g. in html or body tag
            }
          }
        }
      }
    }
  }
}

http://jsfiddle.net/mc2zejf7/1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。