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

Question

一个快速的（希望如此）。

我有类似的东西：

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

如您所见，// Do something 大量嵌套在相关父项中。

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

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

我知道我可以简单地复制和粘贴整个内容，然后将 .js 添加到嵌套 class 的开头，但这似乎非常违反直觉。

有没有办法解决这个问题？以某种方式将 .js 添加到我正在工作的层次结构的根目录，而不需要全部复制和粘贴（这可能会导致维护问题）？

Answer 1

您可以使用 SASS 符号父选择器。它会查找 .js class 作为顶级选择器 (.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 class

Using SASS/SCSS to alter a .js class, within a nested structure

css

sass

hierarchy