2013-05-30 75 views
1

我想使用Modernizr類,但是我無法在當前的嵌套選擇器中看到如何正確使用SASS。在當前的SASS嵌套中添加祖先選擇器

如何優化:

.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; 
}   

回答

3
.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; }   

見另一個例子是10和this post

+0

這很好,可以在SCSS中完成嗎? – bazzlebrush