在当前SASS嵌套中添加祖先选择器 [英] Add ancestor selector in current SASS nesting

问题描述

我想使用Modernizr类，但是我不能在当前的嵌套选择器中看到如何正确地使用SASS。

I would like to use Modernizr classes but I can't see how to do it properly with SASS in a current nesting selectors.

如何优化： p>

How to optimize:

.page-home
    .content
        .rows
            .row
                background: blue

        .images
            width: auto

html.no-touch
    .page-home
        .content
            .rows
                .row
                    &:hover
                        background: red

html.touch
    .page-home
        .content
            .images
                max-width: 50px

要渲染：

.page-home .content .rows .row {
    background: blue;
}
html.no-touch .page-home .content .rows .row:hover {
    background: blue;
}
.page-home .content .images {
    width: auto;
}
html.touch .page-home .content .images {
    max-width: 50px;
}           

推荐答案

.page-home
    .content
        .rows
            .row
                background: blue

                html.no-touch &:hover
                    background: red

        .images
            width: auto

            html.touch &
                max-width: 50px

将呈现：

.page-home .content .rows .row {
  background: blue; }
  html.no-touch .page-home .content .rows .row:hover {
    background: red; }
.page-home .content .images {
  width: auto; }
  html.touch .page-home .content .images {
    max-width: 50px; }          

请参阅 SASS引用父选择器和此帖另一个例子。

这篇关于在当前SASS嵌套中添加祖先选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！