问题
I would like to use Modernizr classes but I can't see how to do it properly with SASS in a current nesting selectors.
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
To render something like :
.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;
}
回答1:
.page-home
.content
.rows
.row
background: blue
html.no-touch &:hover
background: red
.images
width: auto
html.touch &
max-width: 50px
Will render:
.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; }
See SASS referencing parent selectors and this post for another example.
来源:https://stackoverflow.com/questions/16832042/add-ancestor-selector-in-current-sass-nesting