Question

快速（希望）。

我有类似的东西：

.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添加到我正在使用的层次结构的根目录中，而无需将其全部复制并粘贴（这可能导致维护问题）？

Answer 1

您可以使用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/

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

1 个答案: