刪除SASS中的擴展選擇器

-1

要求SASS

.a { 
    .b { 
     .c { 
      .d { 
       .g { 
        ... 
       } 
      } 
     } 

     .c > { 
      .e { 
       .h { 
        ... 
       } 
      } 
      .f { 
       ... 
      } 
     } 
    } 
}

生成

.a .b .c .d .g { ... } 
.a .b .c > .e .h { ... } 
.a .b .c > .f { ... }

聯合上海社會科學院

.a { 
    .b { 
     .c > { 
      .d { // remove > for .d 
       .g { 
        ... 
       } 
      } 
      .e { 
       .h { 
        ... 
       } 
      } 
      .f { 
       ... 
      } 
     } 
    } 
}

生成

.a .b .c > .d .g { ... } // extra > 
.a .b .c > .e .h { ... } 
.a .b .c > .f { ... }

如何爲.d刪除>選擇和它的兄弟姐妹在上面SASS，所以它是有效的，而不是相同的選擇多次重寫？

來源

2015-01-21 VenomVendor

正如旁白 - 你的CSS規則的方式來具體的，這可能會導致問題進一步惡化。任何超過2或3級的特異性，可能有更好的方法來做到這一點。 – rwacarter 2015-01-21 09:57:05

@rwacarter是的，但這是要求。 – VenomVendor 2015-01-21 10:03:31

如果我理解正確的話，你可以使用@at-root實現這一目標：

.a { 
    .b { 
     .c > { 
      @at-root .a .b .c { 
       .d { 
        .g { 
         color: red; 
        } 
       } 
      } 
      .e { 
       .h { 
        color: red; 
       } 
      } 
      .f { 
       color: red; 
      } 
     } 
    } 
}

這將產生：

.a .b .c .d .g { 
    color: red; 
} 
.a .b .c > .e .h { 
    color: red; 
} 
.a .b .c > .f { 
    color: red; 
}

來源

2015-01-21 10:04:01 Vucko

是的，有沒有其他方法可以在'@ at-root'之後移除重複的'.a .b .c'。如何使用'@ at-root（無：....）' – VenomVendor 2015-01-21 10:15:47

我懷疑這是可能的 - [參考]（https://github.com/sass/sass/issues/774）。 – Vucko 2015-01-21 10:22:34

操縱選擇是不優雅的無禮。

.a { 
    .b { 
     .c > { 
      @at-root #{set-nth(nth(&, 1), length(nth(&, 1)), '')} { 
       .d { 
        .g { 
         color: red; 
        } 
       } 
      } 
      .e { 
       .h { 
        color: blue; 
       } 
      } 
      .f { 
       color: green; 
      } 
     } 
    } 
}

輸出：

.a .b .c .d .g { 
    color: red; 
} 
.a .b .c > .e .h { 
    color: blue; 
} 
.a .b .c > .f { 
    color: green; 
}

這是迄今爲止清潔只是正確地擺在首位窩：

.a { 
    .b { 
     .c { 
      .d { 
       .g { 
        color: red; 
       } 
      } 
      > .e { 
       .h { 
        color: blue; 
       } 
      } 
      > .f { 
       color: green; 
      } 
     } 
    } 
}

來源

2015-01-21 13:18:08 cimmanon

這看起來比現有的要複雜得多，嵌套'.c'不止一次，我想避免這種情況。 – VenomVendor 2015-01-21 14:05:38

刪除SASS中的擴展選擇器

回答

相關問題